- Use an action card to provide an entrypoint into a user journey or screen related to the page that the card is displayed on.
- Use an action card to visually highlight links to relevant products, helpful articles and other journeys that will be helpful to the user.
- Use action cards between and after paragraphs and content blocks to create visual breaks in the main page content.
- Don't use an action card to contain the primary page action like 'send reading' on the meter readings page. The action card is used to promote 'related' content.
- Don't use the action card to provide a warning message or notification.
- Don’t stack multiple action cards about the same topic. Where there are multiple links to display about one topic, add an action list directly below to provide more options.
Live example
Availabile platforms
Platform |
Available |
---|---|
Figma |
v3+ |
Web (@ovotech/element) |
n/a |
App (@ovotech/element-native) |
v3.4+ |
How to use it
Full width or inset?

Use a full width card by default and constrain it to a desired width on large screens. The full width card is displayed with no margin to the left and right on small screens.
Use an inset card when stacking it with CTAs or using multiple action cards together. Ensure that the left and righthand edges of the card text aligns to other text on the page. Use an 8px (ovo-core-space-2) margin between inset cards and CTAs when placing them together.
Base or inverted?

Use an inverted card by default. It has higher visual contrast with the light background and attracts attention more effectively. Use the base colour variant when you'd like to make the action card appear more subtle.
Providing an action
When a single action is present on the ActionCard, i.e. onPressActionButton or onPressIndicator, and no other function (see Properties below), then the whole card will be set with that action. This has been done in order to assist the user who may perceive the card to be a tappable element as a whole, rather than just the action element (Action or CTA within the card).
Writing this component
Heading
- Keep the heading on 1 line (2 max)
- Make header action-focused
Body copy
- Keep it clear and concise – aim for approx. 70 characters (3 to 4 lines)
- Must be single paragraph of one size and style (e.g. no parts bold)
- Avoid asterisks and small print beneath, keep content in the card
Action
- Max 4 words
- Action-focused
Terms and conditions
Show terms later in the customer journey, before they make any purchasing decisions.
General
- Avoid jargon or internal language
- Use Plain English - the language our users would say out loud
Properties
Note: all props are optional in ActionCard.
Name |
Values |
Default |
---|---|---|
title |
String |
|
body |
String | ReactElement |
|
onPressCloseButton (top X button) |
() => void |
|
onPressActionButton (text link or CTA action) |
() => void |
|
onPressIndicator (bottom visual chevron) |
() => void |
|
ctaVariant |
|
|
image |
|
|
buttonTitle (for action or CTA) |
String |
|
actionIconName (for Action) |
IconName (string) |
chevron-right-small |
accessibilityLabel |
String |
“image” |
inline |
Boolean |
false |
inverted |
Boolean |
false |
testID (base for internal testIDs) |
String |
|
Related components