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
This card has everything
This is body text
This card has everything
This is body text
This card has everything
This is body text
Content Options
This card has a title
This card has no title
This card has a subtitle
This card has no subtitle
This card has a CTA
This card has no CTA
This whole card is clickable
This whole card is not clickable
This card has an image icon
This card has no image or icon
This card has a Gloss icon
This card has no Gloss icon
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.
Icon size: 0.5
Icon size: 1
Icon size: 1.5
Icon size: 2
Icon size: 2.5
Icon size: 3
Icon size: 3.5
Icon size: 4
Icon size: 4.5
Icon size: 5
Background Color Options
White
Default (gray)
Primary
Primary Light
Secondary
Secondary Light
Tertiary
Text Alignment
Left aligned
body text
Center aligned
body text
Right aligned
body text
Icon centered
body text
Title centered
body text
Divider centered
body text
Body centered
body text
Sizes
Small
Small
Default
Default
Large
Large
Margin Bottom
Margin bottom
Margin bottom
Margin bottom
Margin bottom
Margin bottom
Margin bottom
the end
Margin Top
Margin top
Margin top
Margin top
Margin top
Margin top
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.