Cards & Tiles

Overview

Standard Life codebase implement cards and tiles differently. These guidelines provide consistent principles to apply where possible.

The range of solutions is vast. Follow and apply these guidelines where possible.

Do you need a card?

Cards group related content together. However, too many cards can create confusion, particularly if they compete for the hierarchy or clutter the screen.

It is advisable to trial layouts using spacing or considering changes to the hierarchy before defaulting to a card.

Cards vs Tiles

Both containers share the same structure and elevation guidelines, but with one key difference.

Tiles are cards in which the whole container acts as a clickable area for a SINGLE action; cards contain buttons that trigger multiple actions.

Tiles have additional actions to indicate states, such as hover and focus.

Structure

Allowing flexibility in cards makes it difficult to create an example for every option. The diagram, following guidelines, outlines the key principles to follow when creating cards and tiles.

Hierarchy

A consistent hierarchy of information is key when creating a card. The content must be readable not only by sight but also by screen readers.

Consider how the content flows and balance content and controls to avoid overwhelming users.

Card structure

Anatomy of a card or tile

The hierarchy of a card or tile should be consistent to create familiarity for the users.

1. Icons, Pictograms, Badges and Media should use the appropriate accessibility labels
2. Keep titles clear and concise
3. Content and components can sit within the body of the card as required
4. Button Groups should always be last in the hierarchy for cards, they do not appear in tiles

Tokens

There are design tokens specifically designed to style cards and tiles; these include.

• Surface Colour
• Title Text
• Border
• Border Radius
• Inner padding

Titles

Cards can appear in various locations on the page, and the correct markup (e.g., h1, h2) should be used to create a structured hierarchy.

If the visual style needs to be a different size, you can adjust it using a text class or prop.

                                                        
                                                        
                                                            <div class="co-card">
                                                        <h2 class="co-heading-6xl co-card-title">Card Title</h2>
                                                        ...
                                                        </div>
                                                        
                                                            

Padding & Radius

The inner padding should always use the spacing / card token, except for images, which will likely touch three edges.

This inner padding remains constant across all breakpoints; it does not increase as the card’s overall width increases.

The token rounded / card sets the card’s border radius.

Card Structure

Media

When media is used within a card, it should touch three sides with no inner padding. The media can be placed on the edge that suits.

Media

Headings

Font size can be used to visually represent hierarchy.

If cards appear in a collection, all cards should use the same font sizes for consistency.

Colour

Cards have a dedicated surface colour, surface / card. Using a single surface colour allows a broader range of components to be nested within the body area.

Elevation

Cards appear on different surfaces within a page, use the correct surface based on context.

• Nested cards that appear on the default surface and are best used when highlighting supporting information alongside longer content
• Elevated cards are typically used when several cards are used in a single interface, such as a dashboard, and appear on an alternate surface

It is essential to apply the correct guidelines related to elevation when working with depth on the UI components.

Nested card with a border	Elevated card with shadow on background colour
Nested Cards	Elevated Cards
These cards sit at the same page level and therefore do not require a shadow. Cards have a border line to separate the group from the page.	Elevated cards sit above the alternate surface and will require a shadow, as they sit closer to the screen.
Background colour: Base Surface Shadow: No	Background Colour: Alternate Surfaces Shadow: Yes

Card Alignment

Cards in a collection should have consistent alignment of elements. The tallest card determines the overall height of the card collection.

Align button groups to the bottom of the card.

Designers choose the spacing between cards, but follow the 8px soft grid; the suggested minimum is 16px.

Card Alignment Example

Redlines demonstrate card alignment in a collection

The example above shows how the type scale and weight depict hierarchy. card compositions vary, but use the type styles available to describe the appropriate hierarchy in any custom cards.