Cards & Tiles

Do you need a card?

Cards group related content together. However,too many cards can create confusion, particularly if there are competing for the hierarchy or overpopulating the screen.

Before using a card or creating a custom card it is worth bearing these points in mind.

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 hit state for a SINGLE action, cards contain buttons that trigger multiple actions.

Tiles have further actions to indicate state that are explained in their guidelines.

Styling

Structure

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

Structure

The structure of a card should be consistent to create a familiarity for the users

1. Icons, Pictograms and Media from our existing suites can be used when required
2. The title should be clear and concise and use the appropriate styles
3. The title area is a micro layout that can contain supporting components, icon buttons and buttons should always be last in the row
4. Button groups should use our existing pattern and structure
5. Icons can be swapped for destructive actions if space does not allow a full label
6. Content and components can sit within the body of the card as required

Titles

Cards can appear in different locations in the page flow and the correct headings markup h1, h2 etc should be used to create a structured hierarchy.

When creating a card make sure that the correct heading markup has been used to follow the page flow. If the visual style needs to be a different size then you can manipulate this using a typography class.

                                                        
                                                        
                                                            <h2 class="fs-ty110">Card Title</h2>
                                                        
                                                            

Padding & Radius

The inner padding should always be 16px, with the exception of images which will likely touch three edges.

This inner padding is the same across all breakpoints, it does not increase as the cards overall width increases.

Card Structure

Media

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

Media

Headings

Hierarchy and text colours should be used to visually show hierarchy. Headings should use the appropriate level of Ubuntu Medium Font.The Medium font weight is used to differentiate the cards headers from the page headers.

If cards are presented in a collection, all cards should use the same Ubuntu Medium font sizes.

Colour

Cards should a single card background colour, in a light mode this is the default surface colour (LM N00)

Supporting colours, used in Magnolia, should be depreciated where possible. By scaling back to a single colour we allow for a wider range of components to be nested.

Elevation

Cards can be shown on multiple surfaces within a page and the correct styles should be used to suit the context.

• Nested cards that appear on the default surface and are best used when boxing out supporting information alongside long-form content
• Elevated cards are typically used when a number of cards are used in a single interface such as a list and appear on an alternate surface

It is important 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 within the page on the same level and therefore do not need a shadow. Default cards have a thing borderline to separate the group from the page. Inverted and supporting cards use their background colour.	Elevated cards sit on the level above the background and will need a shadow as they are closer to the screen. To create further contrast the background colour changes to be two shades darker in our Neutral colour palette.
Background colour: Default Surface Shadow: No	Background Colour: Alternate Surfaces Shadow: Yes

Card Alignment

Cards in a collection should have consitent alignment of elements. The tallest card will dictate the overall height of the card in the collection.

Buttons groups should align to the bottom of the card.

The spacing between cards is at the designers discretion but should follow our 8px soft grid, the suggested minimum is 16px.

Card Alignment

The example above shows how the type scale and weight are used to depict hierarchy. Card compositions will vary but you should use the type styles available to depict the appropriate hierarchy in any custom cards.

File Links