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

chair

This is a vertical card

This is a subtitle

This is some body text

This is a CTA
chair

This is a horizontal card

This is a subtitle

This is some body text

This is a CTA

Content Options

This card has a title

This card has no title

Title card has a subtitle

This is a subtitle

This card has no subtitle

This card has body text

This is body text

This card has no body text

This card has a CTA

This is a CTA

This card has no CTA

This whole card is clickable

This is a CTA

This whole card is not clickable

This is a CTA
chair

This card has an image

This card has no image

Layout and Styling Options

Orientation

Vertical

Image location - Top

Vertical

Image location - Bottom

Horizontal

Image location - Left

Horizontal

Image location - Right

Background Colors

White

Muted

Primary

Primary Light

Secondary

Secondary Light

Tertiary

Text Alignment

Left aligned

body text

Call-to-action

Center aligned

body text

Call-to-action

Title centered

body text

Call-to-action

Body centered

body text

Call-to-action

CTA centered

body text

Call-to-action

Sizes

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Style Options

Box Shadow: On

Box Shadow: Off

Hover Effect: On

Mouse over card to see effect.

This effect is primarily intended to be used with the "Make whole card clickable" option.

Hover Effect: Off

Border: On

Border: Off

Margin bottom

Margin bottom

None

Margin bottom

X-Small

Margin bottom

Small

Margin bottom

Medium

Margin bottom

Large

Margin bottom

X-Large

the end

Margin top

Margin top

None

Margin top

X-Small

Margin top

Small

Margin top

Medium

Margin top

Large

Margin top

X-Large

the end

Usage

Do

  • Use cards to organize related items visually, enhancing user navigation and comprehension.
  • Display specific content like featured news or resources on cards to highlight important information.
  • Keep card titles and details brief for clarity.
  • Limit card body text to a few sentences for quick readability.

Don't

  • Avoid using cards for all page content; not all information suits this format.
  • Do not group unrelated items in a single card, as it confuses users.
  • Refrain from mixing different card styles in the same list or grid to maintain visual coherence.
  • Don't use inconsistent image sizes.
  • Avoid clickable card variants with multiple links to prevent navigation confusion.

Accessibility

  • 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.