Cards

Cards are one of the most versatile components in our library. A humble information container in its most simplistic form but able to adapt in a modular fashion to cope with the most complicated of requirements.

Outlined below are the building blocks of our cards and some examples to help you get started.

Basic structure

All cards have a defined container and can be built upon with a few optional sections:

Container
Header
Footer

Each section has its own variables and modular components but the only one required is the container itself as it houses everything card related.

Containers

Nice and simple, this offers the ability to contain all manner of content. By default all containers have a fill of white. When laying out multiple containers on a screen follow the spacing guideline recommendations.

Full-width cards

Full-width cards are our default containers on small screens. Full-width cards are perfect for containing large groups of content, for example a list of markets on Sportsbook. Full-width cards have a top and bottom border of 1 and have no outer spacing at either side ensuring the cards touch the edge of the screen.

Floating cards

Floating cards should be used when full-width cards aren’t appropriate. Floating cards are great for containing small groups content on one screen, for example various contest groups within Discover on Fantasy. Floating cards have a internal border of 1 with rounded corners of 4. Floating cards are inset and do not touch the edge of the screen. We recommend a minimum spacing of 16 - default either side. For more information view our spacing guidelines.

Internal spacing

Internal spacing is crucial to ensuring that there is consistent and adequate spacing within each card. Internal spacing also ensures that content within different cards is vertically aligned creating a quickly scannable list. Our default recommendation is all containers have internal spacing of 16 - default ensuring correct alignment across different cards. For more information view our spacing guidelines.

Card headers can be used to frame the section itself with a title. This is especially useful if there are going to be multiple cards on one page. The header should include a bottom border of 1 and we recommend heading text size of 16 - epsilon bold. Headers should also follow the spacing guidelines for consistency.

The optional card header should act as a baseline for product adaptation.

Card footers can contain links that allow the user to navigate and access additional information if and when required. The footer should include a top border of 1 with link text size of 14 - zeta. The footer can use an optional background highlight color and an arrow right to support the link.

The optional card footer should act as a baseline for product adaptation.

Expand

In certain situations it’s beneficial to artificially limit the vertical height of a card to ensure a page length that’s digestible. This is especially true on mobile devices where we may want to set a max height on certain cards. With this in mind the View more component can be attached to within or bottom of the card. When selected the card expands to its natural size with the View more text becoming View less and the arrow changing direction. When expanded, all content below the card is pushed down with the scroll position not altered allowing the user to scroll down to read the additional content. When collapsing, all content below is pushed up with the scroll position not altered allowing the user to scroll up to view the original content if necessary.

Bottom

Within

Balloons

Balloons are used to visually connect a card to another element. Balloons can feature an arrow on any side with a spacing of 8 - condensed between elements. The container has elevation-low applied with the arrow, 8 in height with a width of 16.

Cards within Cards

In certain situations placing cards within cards is beneficial for example a horizontal scrolling carousel. Internal cards inherit the floating card container style of a border of 1 with rounded corners of 4 and spacing in between of 8 - condensed. Internal cards are masked by the parent card container or the screen edge.