Card

Cards are used to group related information and actions in a consistently styled container.

A common use case of cards is in a grid of items that presents some but not all the data connected to each item; such as news articles, or as in the contrived example below, a user's connected organisations.

Show codeCopy code

The @eds/card package provides a set of primitive components to help compose cards in a flexible but consistent way.

• <Card />: A flexbox container that provides opinionated border and background styles. Supports hiding the border and other props.
• <CardHeader />: A flexbox container to be used as the first child inside the Card component. Supports spacing and divider.
• <CardBody />: A flexbox container to be used as the only or second child inside the Card component. Supports spacing.
• <CardFooter />: A flexbox container to be used as the last child inside the Card component. Supports spacing and divider.

NOTE: It's recommended to always use a CardBody inside the Card, even if other child components aren't needed for your use case.

Hide codeCopy code
<Card>
  <CardHeader>CardHeader</CardHeader>
  <CardBody>CardBody</CardBody>
  <CardFooter>CardFooter</CardFooter>
</Card>

By default, the Card component comes with a solid border around the container. Use the hideBorder prop when the card is placed on a darker background.

Show codeCopy code

Use the divider prop on the CardHeader and CardFooter components respectively, to visually separate them from the CardBody's content.

Show codeCopy code

Use the layout prop in the Card component to control the layout direction of the card elements - either vertical or horizontal.

This automatically updates the use of dividers in CardHeader, CardBody, and CardFooter.

Show codeCopy code

Card layout also supports the responsive prop syntax on most props. Try resizing your viewport to see the effects:

Show codeCopy code

Use the spacing prop in the CardHeader, CardBody and CardFooter components to control the spacing around the contents of the element.

There are four options for spacing; large, medium (default), small and none. Use large or medium spacing for larger cards, and small spacing for smaller cards.

Show codeCopy code

The none spacing is ideal when incorporating elements that need to span the full width from the left to the right edge, such as images:

Show codeCopy code

The <Card /> component supports all of the FlexProps, except:

• flexDirection
• backgroundColor
• borderRadius
• overflow
• borderColor
• borderStyle
• borderWidth

See props for a full list of available props.