Skip to content

Card

Experimental

Use a Card component to emphasize and structure information.

Examples

This example shows a card with title and subtitle:

Card with subtitle

Sunt veniam commodo id est incididunt

Culpa ad eu quis nisi in exercitation magna dolor cillum magna cillum ipsum elit. Dolor occaecat velit non eu dolore pariatur amet. Pariatur anim id deserunt exercitation laboris cillum nisi deserunt occaecat.

Ad elit velit aliqua occaecat adipisicing enim id ea ullamco in. Tempor ea culpa incididunt magna eu nostrud sint id velit. Sint et eiusmod aliqua sit sunt proident eiusmod magna occaecat mollit eu ad enim. Aliqua fugiat enim nisi incididunt tempor irure aliqua anim veniam quis proident minim velit. Irure eiusmod aliqua elit labore eu. Labore nisi in velit aute do in qui sit.

Ut pariatur voluptate proident voluptate quis qui ea reprehenderit anim. Magna esse duis sit aliquip proident mollit dolore pariatur. Ex culpa laboris dolor sint magna mollit. Est eu fugiat dolor veniam fugiat ipsum consectetur laboris esse non dolor est ea. Eu enim consectetur duis eiusmod amet nostrud irure proident veniam eiusmod id aliquip cillum. Est et officia magna excepteur id consectetur dolore adipisicing id.

This example shows a card without subtitle:

Card without subtitle

Culpa ad eu quis nisi in exercitation magna dolor cillum magna cillum ipsum elit. Dolor occaecat velit non eu dolore pariatur amet. Pariatur anim id deserunt exercitation laboris cillum nisi deserunt occaecat.

Ad elit velit aliqua occaecat adipisicing enim id ea ullamco in. Tempor ea culpa incididunt magna eu nostrud sint id velit. Sint et eiusmod aliqua sit sunt proident eiusmod magna occaecat mollit eu ad enim. Aliqua fugiat enim nisi incididunt tempor irure aliqua anim veniam quis proident minim velit. Irure eiusmod aliqua elit labore eu. Labore nisi in velit aute do in qui sit.

Ut pariatur voluptate proident voluptate quis qui ea reprehenderit anim. Magna esse duis sit aliquip proident mollit dolore pariatur. Ex culpa laboris dolor sint magna mollit. Est eu fugiat dolor veniam fugiat ipsum consectetur laboris esse non dolor est ea. Eu enim consectetur duis eiusmod amet nostrud irure proident veniam eiusmod id aliquip cillum. Est et officia magna excepteur id consectetur dolore adipisicing id.

This example shows a card with custom color:

Card with subtitle

Sunt veniam commodo id est incididunt

Culpa ad eu quis nisi in exercitation magna dolor cillum magna cillum ipsum elit. Dolor occaecat velit non eu dolore pariatur amet. Pariatur anim id deserunt exercitation laboris cillum nisi deserunt occaecat.

Ad elit velit aliqua occaecat adipisicing enim id ea ullamco in. Tempor ea culpa incididunt magna eu nostrud sint id velit. Sint et eiusmod aliqua sit sunt proident eiusmod magna occaecat mollit eu ad enim. Aliqua fugiat enim nisi incididunt tempor irure aliqua anim veniam quis proident minim velit. Irure eiusmod aliqua elit labore eu. Labore nisi in velit aute do in qui sit.

Ut pariatur voluptate proident voluptate quis qui ea reprehenderit anim. Magna esse duis sit aliquip proident mollit dolore pariatur. Ex culpa laboris dolor sint magna mollit. Est eu fugiat dolor veniam fugiat ipsum consectetur laboris esse non dolor est ea. Eu enim consectetur duis eiusmod amet nostrud irure proident veniam eiusmod id aliquip cillum. Est et officia magna excepteur id consectetur dolore adipisicing id.

System props

Card supports space props and color props from Styled System.

Component props

NameTypeDefaultRequiredDescription
colorStringprimaryColor needs to have high contrast with background color.
titleNodeComponent that renders a title (composition pattern).
subtitleNodeComponent that renders a subtitle (composition pattern).
childrenNodeChildren to be rendered inside card.

Variants

This component does not support variants.

Visual regression testing

The following URLs can be used for visual regression testing: