Card

Cards

Cards are a primary element in our UI kit. They contain most of the content on our pages.

Cards are important in UI layouts because they organize information, provide modular flexibility, visually separate content, and focus attention.

Basic cards

Cards can have an optional title and description.

Example

This is content in a simple card.

This card has a title

This is content in a simple card.

This card has a title

And this one also has a description.
This is content in a simple card.

Cards with sections

Cards can have sections, which are visually separated by a horizontal line.

You do this by giving the card a sectioned prop, which removes any default padding. Then you can add Card.Section components to the card.

Example

Card title

This is the first section of the card.
This the second section.

Cards with progress

Cards can have progress bars, which are useful for showing progress on a task or process. Simply set the progress prop to a number between 0 and 100.

Example

Your setup

You are on step 2 of 5. You can do this!

Horizontal cards

The layout component <Switcher> can be used to create grids of cards.

Example

This is content in a simple card.
This is content in a simple card.
This is content in a simple card.

Expandable cards

Sometimes you want a card to also be an accordion. Multi purpose, right?

For this, there is the <ExpandableCard> component:

Example

ButtonDetails