This content is inside a card
  • Box For custom layouts.
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
Card corners can be rounded by providing the rounded prop.
Alternatively, rounding may be applied responsively using the roundAbove prop, and providing either mobile or tablet. 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)
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.