Card

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

Edit live code
<Card>
  <Heading2>Plastic Recyling</Heading2>
  <P>
    Nearly all types of plastics can be recycled. However, the extent to which they are recycled depends upon technical, economic and logistic factors.
  </P>
</Card>
<Card>
  <Heading2>Plastic Recyling</Heading2>
  <P>
    Nearly all types of plastics can be recycled. However, the extent to which they are recycled depends upon technical, economic and logistic factors.
  </P>
</Card>

Variations

Inline

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

Edit live code
<Card inline>
  <Heading2>Plastic Recyling</Heading2>
  <P>
    Nearly all types of plastics can be recycled. However, the extent to which they are recycled depends upon technical, economic and logistic factors.
  </P>
</Card>
<Card inline>
  <Heading2>Plastic Recyling</Heading2>
  <P>
    Nearly all types of plastics can be recycled. However, the extent to which they are recycled depends upon technical, economic and logistic factors.
  </P>
</Card>

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.

Edit live code
<Card as="fieldset">
  <Stack spaceBetween={4}>
    <Heading2 as="legend">Contact details</Heading2>
    <TextField id="email" label="Email" />
    <TextField id="phone" label="Phone" />
  </Stack>
</Card>
<Card as="fieldset">
  <Stack spaceBetween={4}>
    <Heading2 as="legend">Contact details</Heading2>
    <TextField id="email" label="Email" />
    <TextField id="phone" label="Phone" />
  </Stack>
</Card>

Properties