'Page Card' component

Component type	Block
Component possible inclusions	n/a
Design source (in Figma)	Page Card
Component status	https://rb-digital.atlassian.net/browse/DSD-325

Introduction

Cards group information into flexible containers to let users browse a collection of related items and actions. Page cards feature other pages of the website prompting the user to navigate to these pages through clicking or tapping on page cards.

Anatomy

Key Content

Item	Type	Notes
Label	Typography	e.g. Featured
Imagery	Image
Overline	Typography
Page name	Typography	This will pull from the relevant content type field (e.i. page title)
Page description	Typography	This will pull from the short description of the relevant item featured within the card

Visual Style

Boundaries

Cards can have visual boundaries or not (adjusting subtlety)

The left card is more subtle than the right. Design options include card border (or not), elevation (box shadow) or not, corner radius (inherits from global shape settings), text box inset/padding - which impacts border radius of the image, etc.

Behavior

Interactive cards include a default, hover and active state.
Where cards have a single focusable element, the whole card (container) links to the primary link destination and any CTA is effectively decorative.
Where cards have more than one focusable element (not expected within MVP) this creates an additional tab stop.

Usage

Do’s

Use product cards when you need to feature a group of products. Cards are never shown by themselves, always within lists.

Don’ts

Don’t use page cards when you only need a simple call to action. Use a CTA Block instead.
Don’t use page cards when you need sequential text elements. Cards should be independent in nature and make sense in isolation.
Don’t use page cards when you only want to ‘decorate’ something to look like a card.

Analytics & Data

Most requirements are covered under lists.

Related/Similar Components

Product cards
Picto cards
Asset cards
List