Card

This content is inside a card

Controlling the height

By default, height will be set to content — growing to accomodate what is inside it.Alternatively, choose a height of full to use all available vertical space. This is useful when composing rows of Card components that should all be equal height.

Open in Playroom

Tones

Providing a tone prop will add a keyline down the left hand side of the container. The supported tones are promote and formAccent.

PROMOTE

FORMACCENT

Open in Playroom

Custom semantics

The HTML tag can be customised to ensure the underlying document semantics are meaningful. This can be done using the component prop and supports div (default), article, aside, details, main and section.

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.

<Card
  data={{ testid: 'card-1' }}
  // => data-testid="card-1"
>
  ...
</Card>

Open in Playroom

Alternatives

Box — For custom layouts.

Braid Logo