Card

Table of contents

Examples
System props
Component props
Variants
Visual regression testing

Experimental

View source

Table of contents

Examples
System props
Component props
Variants
Visual regression testing

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.

<Card
  title={<Heading as="h1">Card with subtitle</Heading>}
  subtitle={<Text>Sunt veniam commodo id est incididunt</Text>}
  m={2}
>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
</Card>

<Card
  title={<Heading as="h1">Card with subtitle</Heading>}
  subtitle={<Text>Sunt veniam commodo id est incididunt</Text>}
  m={2}
>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
</Card>

This example shows a card without subtitle:

Card without subtitle

<Card title={<Heading as="h1">Card without subtitle</Heading>} m={2}>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
</Card>

<Card title={<Heading as="h1">Card without subtitle</Heading>} m={2}>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
</Card>

This example shows a card with custom color:

Card with subtitle

Sunt veniam commodo id est incididunt

<Card
  title={<Heading as="h1">Card with subtitle</Heading>}
  subtitle={<Text>Sunt veniam commodo id est incididunt</Text>}
  color="secondary"
  m={2}
>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
</Card>

<Card
  title={<Heading as="h1">Card with subtitle</Heading>}
  subtitle={<Text>Sunt veniam commodo id est incididunt</Text>}
  color="secondary"
  m={2}
>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
  <Styled.p>
    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.
  </Styled.p>
</Card>

System props

Card supports space props and color props from Styled System.

Component props

Name	Type	Default	Required	Description
color	String	primary		Color needs to have high contrast with background color.
title	Node		✓	Component that renders a title (composition pattern).
subtitle	Node			Component that renders a subtitle (composition pattern).
children	Node			Children 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:

Edit this page on GitHub

1 contributor

Last edited by maiertech on December 24, 2020