A Card component is a visually appealing box that you can use to organize various pieces of related information neatly on your webpage. Cards can include a mix of elements such as an image, a headline, some brief text, and possibly a link to more details.
Examples
Layout and Styling Options
Icon Sizes
Gloss Icon Option: Use the slider to adjust the icon size relative to the text. For example, selecting size 2 makes the icon twice the size of the body text.
Image Option: You can't change the image size at this time.
Note: The icon size setting is currently found under the "Content" tab, though it might be moved to the "Layout and Style" tab in the future.
Background Color Options
Text Alignment
Sizes
Margin Bottom
the end
Margin Top
the end
Usage
Do
- Choose relevant icons or images. This helps in quickly conveying the purpose or theme of the card to users.
- Keep titles clear and concise.
- If you include a subtitle, make sure it adds meaningful context or detail that complements the title.
- The body text should be informative and relevant to the title. Use it to elaborate on the key points or provide additional details that might interest the reader.
- If the card has a call-to-action (CTA), ensure it clearly indicates what the reader should do next, such as “Learn More,” “Sign Up,” or “Read Article.”
- Try to maintain visual consistency by ensuring the card’s design matches the overall look and feel of your site.
Don't
- Avoid overcrowding the card with too much text.
- Do not include CTAs that are unclear or irrelevant to the card’s content.
- Don't use inconsistent icon sizes.
- Refrain from mixing different card styles in the same list or grid to maintain visual coherence.
- Don't put links inside the body text to prevent navigation confusion.
Accessibility
- When using image icons, ensure that you provide suitable alt text for the images on your cards. Alt text for images enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.