- Use a card to group content into a container.
- Use a card to give the user a clear action and include the use ofaction component at the bottom of an action card to provide a clear call to action when the card is actionable.
- Use multiple interactive cards to present a choice of options to users.
- Don’t overuse the card component. Use the card specifically to group related information or give prominence to product information.
- Don’t create cross purpose cards. Cards should each be focused on one topic or have one clear action.
Live example
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
v1+ |
|
Web (@ovotech/element) |
v1+ |
|
App (@ovotech/element-native) |
v1+ |
How to use it
- Make the purpose of the card clear and focus the content on just one topic
- Keep the card content short and concise
Interactive cards
- Where cards are interactive, use an action component as the last element within the card to indicate that it's interactive
- Where there's only one interactive element inside the card, the whole card should should be clickable
- Where there are multiple interactive elements inside the card, the card itself should not be clickable
Inline
Cards can be used inside other cards by adding the inline prop.
Custom HTML elements
The semantic element rendered by the Card can be changed using the as prop from Styled Components (opens in new window).
The example below renders the Card as a fieldset and the Heading as a Legend.
Properties
These are the properties for anyone implementing this component and code.
|
Name |
Values |
Default |
|---|---|---|
|
inline |
Boolean |
false |
|
... |
JSX.IntrinsicElements["div"] |
|
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As someone with a cognitive disability, I want to be able to scan a page and quickly understand the important sections of content present.
- As a keyboard-only user, I want to be able to navigate to and activate any interactive content within the card.
- As someone with a motor disability, I want to be able to easily select interactive content within the card.
Test steps
Use these steps to check that the card component has been implemented correctly:
- Turn on a screen reader.
- Navigate to the card components and verify that if a heading is present, that an appropriate heading level (maintaining the page's hierarchy) has been provided.
- If a heading is present, verify that this is meaningful and provides sufficient context to the content within the card.
- Navigate to any interactive components and verify that an appropriate role (based on the purpose of the control) and a name (providing the purpose of the control) is announced.5. Open the browser's developer tools.
- Verify that interactive elements have a target size of at least 24 pixels by 24 pixels. If smaller, check there are no other interactive elements within a 24 pixel range from the centre of the interactive element.
Avoiding accessibility barriers
We're aware of the following barriers that can be introduced when using this component. Ensure that you are not adding barriers, by considering the following:
- While the whole card should be clickable when there's only a single interactive element in it, this should be implemented in a way that does not impact the semantic meaning of the content. Rather than wrapping all the card's content in a link, or a button, which would affect the meaning of content, it should only be the clickable area of the existing interactive element that should change in size. This can be achieved with additional styling or scripting.