Use a Card
component to emphasize and structure information.
This example shows a card with title and 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.
<Cardtitle={<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 ipsumelit. Dolor occaecat velit non eu dolore pariatur amet. Pariatur anim iddeserunt exercitation laboris cillum nisi deserunt occaecat.</Styled.p><Styled.p>Ad elit velit aliqua occaecat adipisicing enim id ea ullamco in. Tempor eaculpa incididunt magna eu nostrud sint id velit. Sint et eiusmod aliqua sitsunt proident eiusmod magna occaecat mollit eu ad enim. Aliqua fugiat enimnisi incididunt tempor irure aliqua anim veniam quis proident minim velit.Irure eiusmod aliqua elit labore eu. Labore nisi in velit aute do in quisit.</Styled.p><Styled.p>Ut pariatur voluptate proident voluptate quis qui ea reprehenderit anim.Magna esse duis sit aliquip proident mollit dolore pariatur. Ex culpalaboris dolor sint magna mollit. Est eu fugiat dolor veniam fugiat ipsumconsectetur laboris esse non dolor est ea. Eu enim consectetur duis eiusmodamet nostrud irure proident veniam eiusmod id aliquip cillum. Est et officiamagna excepteur id consectetur dolore adipisicing id.</Styled.p></Card>
This example shows a 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.
<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 ipsumelit. Dolor occaecat velit non eu dolore pariatur amet. Pariatur anim iddeserunt exercitation laboris cillum nisi deserunt occaecat.</Styled.p><Styled.p>Ad elit velit aliqua occaecat adipisicing enim id ea ullamco in. Tempor eaculpa incididunt magna eu nostrud sint id velit. Sint et eiusmod aliqua sitsunt proident eiusmod magna occaecat mollit eu ad enim. Aliqua fugiat enimnisi incididunt tempor irure aliqua anim veniam quis proident minim velit.Irure eiusmod aliqua elit labore eu. Labore nisi in velit aute do in quisit.</Styled.p><Styled.p>Ut pariatur voluptate proident voluptate quis qui ea reprehenderit anim.Magna esse duis sit aliquip proident mollit dolore pariatur. Ex culpalaboris dolor sint magna mollit. Est eu fugiat dolor veniam fugiat ipsumconsectetur laboris esse non dolor est ea. Eu enim consectetur duis eiusmodamet nostrud irure proident veniam eiusmod id aliquip cillum. Est et officiamagna excepteur id consectetur dolore adipisicing id.</Styled.p></Card>
This example shows a card with custom color:
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.
<Cardtitle={<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 ipsumelit. Dolor occaecat velit non eu dolore pariatur amet. Pariatur anim iddeserunt exercitation laboris cillum nisi deserunt occaecat.</Styled.p><Styled.p>Ad elit velit aliqua occaecat adipisicing enim id ea ullamco in. Tempor eaculpa incididunt magna eu nostrud sint id velit. Sint et eiusmod aliqua sitsunt proident eiusmod magna occaecat mollit eu ad enim. Aliqua fugiat enimnisi incididunt tempor irure aliqua anim veniam quis proident minim velit.Irure eiusmod aliqua elit labore eu. Labore nisi in velit aute do in quisit.</Styled.p><Styled.p>Ut pariatur voluptate proident voluptate quis qui ea reprehenderit anim.Magna esse duis sit aliquip proident mollit dolore pariatur. Ex culpalaboris dolor sint magna mollit. Est eu fugiat dolor veniam fugiat ipsumconsectetur laboris esse non dolor est ea. Eu enim consectetur duis eiusmodamet nostrud irure proident veniam eiusmod id aliquip cillum. Est et officiamagna excepteur id consectetur dolore adipisicing id.</Styled.p></Card>
Card
supports space props and
color props from
Styled System.
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. |
This component does not support variants.
The following URLs can be used for visual regression testing: