This content is inside a card
Open in Playroom
  • Box For custom layouts.
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
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
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
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.