Card

Cards are used to define sections of content.

Overview

Cards are used on their own to break up sections of simple content or extended to create more complex features such as banners.

Cards can be used inside other cards by adding the inline prop.

The semantic element rendered by the Card can be changed using the as prop from Styled Components (opens in new window) .

The example below renders the Card as a fieldset and the Heading as a Legend.

Name	Values	Default
inline	Boolean
...	JSX.IntrinsicElements["div"]