The Cards content component is a flexible UI design pattern that groups related information inside containers that visually resemble playing cards. Cards are ideal for presenting related content in a clean, structured layout.
Key Takeaways
- Title is required and displays as the card heading.
- Content is optional; keep it brief and consistent across cards.
- Buttons are optional and appear at the bottom; multiple buttons are supported.
- Image is optional and should be cropped to the desired ratio prior to upload.
- Image Alt Text: If using image, describe the purpose of the image for screen readers and search engines.
- Image Position: When using image, decide whether the image should display before or after title.
- Orientation settings: Vertical = image above/below; Horizontal = image beside content
- Background color can be customized per card.
- Always save each item before closing.
Best Practices
- Keep content concise and evenly balanced across cards.
- Use consistent image sizes to avoid uneven layouts.
- Add meaningful alt text focused on purpose, not just description.
- Use button styles (e.g., primary vs. outline) to create visual hierarchy.
- Maintain consistent image placement or use a deliberate alternating pattern.