Card

Cards are containers used to organize high-level content and display pieces of information as a preview in chunk sizes.

Usage

• Use cards to make the content in the UI more navigable and to avoid information clutter, by showing user only a preview of detailed content they are about to open.
• A card should only contain a single idea which may feature a call-to-action, or the option to navigate to more detailed content. The content of a card should be concise.
• One must decide on which type of card to use based on the the content they are aiming to display, the importance of this content in the whole UI hierarchy, etc.
• If multiple cards are placed on a page, they should be placed 16px apart on all sides.

Anatomy

Variants

States

Accessibility

Tokens

SCSS Variable

Value

$card-padding

--gutter-m

$card-margin

--gutter-m

$card-backgroundColor

--color-grey-98

$card-borderRadius

--gutter-xs

Properties

export interface CardProps {
  level?: 2 | 4 | 6;
}

Playground

Root size

SmallMediumBig

Small

Level

246

2

Card content

        
          

            <
            Card

            
              
                 level
                
                  =
                  "2"
                
              
            

            />