Skip to content

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.

Usage

Plastic Recyling

Nearly all types of plastics can be recycled. However, the extent to which they are recycled depends upon technical, economic and logistic factors.

Variations

Inline

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

Plastic Recyling

Nearly all types of plastics can be recycled. However, the extent to which they are recycled depends upon technical, economic and logistic factors.

Other HTML elements

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.

Contact details

Properties

NameValuesDefault

inline

Boolean

...

JSX.IntrinsicElements["div"]

Tokens