Use cards to display a simple overview and provide entry points to deeper, descriptive data or flows.
At a glance
We’ve designed a range of cards to display information, data and sales products in a consistent and simplified way. Content is simplified for display within a card, revealing all details once its been tapped. These cards will also help ensure information is displayed more consistently, making it easier to scan.
Cards come in three sizes, built to scale across device type (including watch and tablet), and include features such as badges and icons to aid sales and campaigns.
Card sizes
There are three sizes of card which can be used on the home layer
– small, medium and large.
These cards are designed to give a snapshot of information, loading additional detail upon a tap.
Tapping these cards can load either a Layer 2 or bottom sheet, depending on content requirements.
Small
A small card should always sit alongside another small card to ensure the row is filled. If no other relevant small card is available, use a medium card.
Medium
Up to two data points can be displayed on a medium card and be accompanied by a small progress bar if necessary (must include key).
Large
Up to two data points can be displayed on a large card and must be accompanied by a graph or data visualisation and axis information. Tapping will display additional data and allow for further interactions.
Composition
Following row should include a different composition to the one above.
Two small cards
One medium card
One large card
Types of card
Text cards
Main purpose
Present top level text-based highlights and provides an entry point to journeys and detailed information breakdowns. Can be used to signify a product, service or written message.
Key rules
- Simplified level of information
- Must have a heading
- Subheading is optional
- No CTAs/buttons to be included
-
One visual element (icon or illustration) only
|
Heading Must have a heading Heading can comprise of two colours Maximum 2 lines |
Timeframe Not applicable |
Value Not applicable |
Subheading
Used to describe or support
the heading |
|
Badge Applicable (optional) on illustration variants |
Visual One permitted Illustration or icon |
Colour
Light theme card |
Drop shadow
Must be on (if tappable) |
Data cards
Main purpose
Present top level data-based highlights and provides an entry point to journeys and detailed information breakdowns. Includes word ‘value’ on base component.
Key rules
- Simplified level of information
- Must have a heading
- Subtitle must relate to timeframe
- Must have a value and metric (if required)
- No CTAs/buttons to be included
|
Heading Must have a heading, if used to depict data (chart info card can be used as text only, with optional heading) Heading can comprise of two colours Two colours must be used, if data as being compared (see medium, two value progress bar card) Recommend value works on single line |
Timeframe Optional, but recommended Must relate to a timeframe e.g. Today 7 September Week so far Monthly |
Value Must include a value and supporting metric, if required |
Subheading Used to describe or support the value |
|
Badge Not applicable |
Visual One permitted only Icons should not be used alongside graphs |
Colour Light theme card Brand theme cards Cards allow for two-colour values |
Drop shadow Must be on (if tappable) Select ‘interactive’ card type |
Image cards
Main purpose
Hero a key product or service, with a catchy caption. Glanceable information. Entry point to more granular detail.
Key rules
- Must have a heading
- Can have a badge
- Subheading is optional
- No CTAs/buttons to be included
- Only one hero image card to be used per page
- Multiple services image cards permitted
|
Heading Must have a heading Heading can comprise of two colours Maximum 2 lines |
Timeframe Not applicable |
Value Not applicable |
Subheading Used to describe or support the heading Not applicable on small Optional on medium Must be short and concise |
|
Badge Optional Maximum 2 words Avoid repetition – use on key cards only, for impact |
Visual One image or illustration |
Colour Light theme card Cards allow for two-colour heading |
Drop shadow Must be on (if tappable) Select ‘interactive’ card type |
Offer cards
Main purpose
Promote and sell promotions, products and services. Offer cards provide more space for descriptions, with a focus on selling.
Key rules
- Must have a heading
- Must have a subheading
- Eyebrow is optional
- Badge is optional
- No CTAs/buttons to be included
- Illustration data card (small only) can be used in conjunction, to give visual distinction (height adjusts)
|
Heading Must have a heading Maximum 2 lines |
Timeframe Not applicable Use eyebrow for Beyond exclusive tag |
Value Not applicable |
Subheading Used to describe or support the heading Must be short and concise |
|
Badge Optional Maximum 2 words Avoid repetition – use on key cards only, for impact |
Visual One image or illustration |
Colour Light theme card |
Drop shadow Must be on (if tappable) Select ‘interactive’ card type |
Disruptive cards
Main purpose
Used to disrupt and draw attention on home and layer one pages. Can include key messaging or actions that are not required to be alerts.
Key rules
- Must have a heading
- Must have an icon
- No CTAs/buttons to be included
|
Heading Must have a heading Maximum 3 lines (small) and 2 lines (medium) |
Timeframe Not applicable |
Value Not applicable |
Subheading Not applicable |
|
Badge Not applicable |
Visual One icon |
Colour Success, info or warning Icon and copy darker shade Card background is lighter shade |
Drop shadow Must be on (if tappable) Select ‘interactive’ card type |
Balance card
Main purpose
Used to display the user’s balance on the home layer only. Has a bespoke error state that is displayed when the balance fails to load.
|
Heading Content is fixed Max 12 characters |
Timeframe Not applicable |
Value Not applicable No limit |
Subheading Content is fixed Max 40 characters |
|
Badge Displays credit/debit label on PAYM balance card only |
Visual One illustration |
Button Displays top up action on PAYG balance card only |
Drop shadow Always present |
Examples
