Magnolia Overview

Key Points

• Magnolia cards have fixed properties unline our card layouts
• Although they have a range of colours we are trying to limit cards to white backgrounds only
• Cards within the same collection should use the same typography to indicate a collection

 

Card Types

We have a number of card types already composed in our design system for specific purposes. These items are listed below and should be used based on their default optons.

Custom cards should only be used when there is a definite need for a card

Card + Call To Action

The most common card type is used to summarise the content and lead the customer to further information via a call to action (CTA).

This component optionally displays a pictogram, title and text as well a CTA button.

Orientation

These card types have the option to be displayed with the pictogram aligned horizontally or vertically.

 

Inverted Colours

These should be used when a card is trying to draw attention or highlight one specific thing, think of it as a focal point. To draw attention the inverted cards should be used sparingly.

 

Supporting Colours

Supporting colours are used when a collection of cards are trying to highlight content to the user but in a grouped collection, for example, new features or a new range of products.

These should be used when the collection is related and of equal value but each card needs to have it's own unique style.

Each of colour of the card has their own specific badge , however, the text, button and links styles are all shared. The colours have no specific meeting so can be used interchangeably.

Important points about supporting cards:

• They can only be the following colours, not shades of the palette
• Only images, pictograms, icons, text, buttons and supporting badges should nested in these cards

Featured Cards

Featured cards should be used when you want to draw a users attention to content, usually as a lead in to a new page or section.

What is unique about featured cards are:

• They have a range of supporting colours and badges to help draw attention, two are shown below
• An illustration graphic can be added to the background for further visual enhancement and to give context to the card

 

---

Action Card + Image

Action cards are used to flag a feature via a badge component.

The intention is that these are slightly subtler cards that featured cards. The content around this card should indicate the context that this card is a callout to further information.

Card + List

Building on the Card + Call To Action composition, this option also has an additional list. Each list item can navigate to a separate location, but should be related to the context of the card.

There are no restrictions on the number of list items but it this card should be treated as a summary, so focus on the key items. Do not use this card to recreate a navigation system.

List

If you require a simple list of options but without additional assets.

There are no restrictions on the number of list items but it this card should be treated as a snapshop, so focus on the key items. Do not use this card to recreate a navigation system.

 

Navigation Card

Navigational cards use the Caret Right icon to indicate to the user that the action of the card will move them deeper into the hierarchy.

The whole card is clickable and there are no other components which trigger an action in these cards.

 

Card + Image

Images are the focal point of these cards and will require art direction to work successfully across breakpoints. These card have the option for a unique badge to be displayed; this can contain an icon and text label. The card layout changes based on the breakpoint.

Card + Button

In come instances a card may require an icon button for supporting information or additional features. This composition allows that.