BRAID
Braid Logo
 

Card

This content is inside a card
Open in Playroom

Alternatives

  • Box — For custom layouts.

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

Rounded corners

Card corners can be rounded by providing the rounded prop.
Alternatively, rounding may be applied responsively using the roundedAbove prop, and providing either mobile, tablet or desktop. This enables card edges to be softened on larger screens, but squared off if it runs full bleed on smaller devices.
DEFAULT
ROUNDED
RESPONSIVELY ROUNDED (e.g. above mobile)
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.