Card

<React.Fragment />

Card configuration

Card components use the following props:

className (optional)

A CSS class name to pass to the component.

hasSecondaryBackground (optional)

Sets the card to have a secondary background colour.

headingLevel (optional)

Heading level to use for the card‘s title. Default is H2.

href (optional)

href attribute for navigation card.

isAdaptive (optional)

Makes the card display a horizontal layout when the card itself is wider than mobile size. Boolean.

isHorizontal (optional)

Makes the card display a horizontal layout at all times. Boolean.

isHorizontalSmall (optional)

Makes the card display a horizontal layout when the viewport is at mobile size. Boolean.

linkComponent (optional)

Function that returns an element, to customise the output.

tagName (optional)

HTML tag name to use for the card. Default is div.

Card media configuration

<React.Fragment />

Card.Media components use the following props:

isCover (optional)

Makes the image fill the available space. Boolean.

mediaWidth (optional)

Permitted values are narrow and wide.

ratio (optional)

Aspect ratio to use. Supported values are:

• 1:1 (square)
• 4:3 (standard fullscreen)
• 16:9 (standard widescreen) (default)
• 21:9 (anamorphic widescreen)

Card content header configuration

Card components use the following props:

title

Title of the card.

description (optional)

Hidden text added to the title for additional context.

Card status tag configuration

<React.Fragment />

Card.StatusTag components implement Tag. They use the following props:

colour (optional)

The tag colour to use.

isHidden (optional)

Applies aria-hidden="true", for if you want to hide the tag from screen readers. Boolean.

Card metadata configuration

<React.Fragment />

Card.Metadata components behave the same way as PageMetadata components, with isInline active.