ActionCard

Action cards group a heading, body text,
imagery and one or two actions into a
card container.

  • 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?

ActionCard guidelines 1

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?

ActionCard guidelines 2

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

CTAVariantName

 

image

ImageSourcePropType

 

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