Layout
Card Composable
Cards contain preview content and actions relating to a specific subject.
Anatomy
The card is a composable component. It is responsible for maintaining the card state, and containing and receiving interactions from the areas of the card. It is the wrapper for the areas listed below:
| Item | Name | Description | Component | Optional |
|---|
Options
The card has options for different use cases:
Card as a link
A part or the whole card can be a link by using the expand prop.
Order
The order in which the card areas appear can be changed at different breakpoints.
Span
Card areas can be set to span any number of columns in the grid, or set to a percentage, allowing for custom layout ratios.
Inset
Card areas can have inset space applied by using logical props to set the desired spacing.
Card as a link
A part or the whole card can be a link by using the expand prop.
Order
The order in which the card areas appear can be changed at different breakpoints.
Span
Card areas can be set to span any number of columns in the grid, or set to a percentage, allowing for custom layout ratios.
Inset
Card areas can have inset space applied by using logical props to set the desired spacing.
Behaviours
Here’s how the card behaves:
Grid layout
The card uses the grid layout component to give layout control across breakpoints and any elements passed to the areas of the card.
Static card
If CardLink is not provided, the card will omit all interactive states from the style presets applied to the card, appearing static.
Grid layout
The card uses the grid layout component to give layout control across breakpoints and any elements passed to the areas of the card.
Static card
If CardLink is not provided, the card will omit all interactive states from the style presets applied to the card, appearing static.
Usage
Here’s how and when to use the card:
Do have clear and succinct card headings
Headings should be concise and briefly explain the content.
Don’t use excessive content
Avoid including lots of information in a card, so users are not overwhelmed with excessive content. Include essential, summarised information that acts as a preview for the main content it represents.
Do use consistent elements when arranged in groups.
Aim for consistency in cards that are part of a related group.
Don’t use varying heights in a group of cards
Avoid varying heights of cards when placed next to each other in a rail. Cards should all match the height of the largest card, taking up the available space i.e. not having different height cards. Reference: Card - CSS: Cascading Style Sheets | MDN
Do ensure the content in the card represents its destination
The information contained within a card should always be related to the content it represents.
Accessibility considerations
The card has the following accessibility considerations:
Use list markup to group your cards
Each Card has a Heading level of the same level because they belong to a flat list hierarchy
When grouping the cards in a List, add an appropriate heading for the Group or aria-label that describes the group
Update the heading level based on the content of the page to make sure card headings are in the correct, logical order
Avoid having 2 links to the same URL (in the same Card) like one for the Title and another for the Read More link (in that way we reduce the tab stops)
When creating a tab order for the different parts of the card, remember to put the headline before the image or media so that screen-reader users get the context before the image alt tag
A video: If a video is provided, ensure the following
The video does not auto-play
The video player's controls are accessible by a screen reader and keyboard
Dialogue in the video is accompanied by closed captions
It's not recommended to nest interactive elements like a button inside a link, or a link inside a button and so on
Don't wrap the whole card in a Link, use the
expandprop to make it interactive
Focus order depends on how the card areas are assembled and ordered in the DOM. The first interactive element of the card will be the first focusable item.
| Command | Description |
|---|
| Element | Attribute | Value | Description | User supplied |
|---|
SEO considerations
Ensure all text, icons, and images are visible in the card so information can be crawled and indexed by search engines
Allow all text to use schema markup (h tag or span).
Ensure any media used has alt text applied
When nesting other components in the card actions area make sure to follow those components SEO guidelines
The content shown on-load should be optimised and labeled accordingly as standard. Should conform to best practice SEO techniques
API
The card has a range of props to define the experience in different use cases, and a range of predefined elements and attributes that you can override to define their appearance.
| Name | Type | Default | Description | Required |
|---|
Please refer to the component, grid layout and any elements passed to the zones of the card.
| Name | Type | Default | Description | Required |
|---|
| Name | Type | Default | Description | Required |
|---|
| Name | Type | Default | Description | Required |
|---|
Props & Overrides same as StandaloneLink
| Name | Type | Default | Description | Required |
|---|