Skip to main content

Components

Card

Display content related to a single subject

banner-Card

Anatomy

Cards group information into flexible containers to let users to browse a collection of related items and actions. They show a taste of information and reveal more details upon interaction.

anatomy card
  1. Card Container : This rectangular flexible container is the fundamental part of this component.
  2. Card Media (Optional) : Image of context information from spesific each card item.
  3. Heading (Optional) : A section for the title of each card or insert another component that will be placed in the top of the card.
  4. Body : A section for the description of each card or insert another component that will be placed in the center of the card.
  5. Footer (Optional) : A section for the call to action of each card or insert another component that will be placed in the bottom of the card.

Usage

Card is used to highlight content in grids. It visually shows that children elements belong together and can highlight the items on hover or selected. Don’t put too much content in a card because the cards are designed for a quick scan about a single topic with keep the cards a uniform size.

Common places card appear: List of product, service, pricing, etc.

When to use

  • You have long sections of content with similar structure.
  • You want to organize it into related groups.
  • You want to show all the content at once.

When not to use

  • You want to display only one section at a time.
  • There is a single action applying to all the content.
  • You have many sections with little information in each.

Accessibility

Provide an accessible name for the card and place cards inside of a list element whenever displaying a set of multiple cards, with a list item wrapped around each card. This list element must also have its own accessible and you should generally ensure a card does not have an excessive amount of functionality or complexity within it, as this can make it more difficult for users to operate or navigate items within the card.

If used graphics and icons that do not communicate any additional information beyond what is represented in text may be considered decorative and should not provide any text alternative.

Alt text

DO

Aim to have cards grouped together of similar size and content length

Alt text

DON'T

Incosistent card group of content and try to make a uniform grid

Content

When creating card :

  • Most cards include at least a title and an action menu, in addition to an image. Buttons and a body section for metadata, or a description, are optional.
  • The language needs to clearly communicate what someone will find at the card’s destination, especially in the title and button.
  • Titles are short (5-7 words) and focused on the value someone will get from interacting with the card.
  • Card Body is brief (about 10-15 words, but can be more depending on the complexity of the information) or complementing the title with more in-depth context.
  • Keep button text at 1-3 words, using a verb phrase to state the action that someone is taking.
  • Titles and action menu content are parallel in structure, straightforward, and use sentence case capitalization.