Cards

Components

Last updated: September 2017

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

Each card is built up of a few optional sections:

  1. Container
  2. Header
  3. Content
  4. 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.

Container

Nice and simple, this offers the ability to contain all manner of content. By default this doesn’t have any spacing, this should be defined by the content being placed within it. Each platform has slight differences to fit with the aesthetics of the platform itself. Where possible we want FanDuel to strike that balance between feeling at home on each platform but also feeling like a FanDuel product.

Android

Android cards have a 1 Grey border and a 2 border radius.

iOS

iOS cards have a 1 Grey border and a 4 border radius.

Web

Web cards have a drop shadow and a border radius of 4 . The drop shadow should be black (#000000) with a 0.25 alpha, x value of 0, y value of 1, a blur of 4 and 0 spread.

Spacing

The outer spacing is crucial in creating a clear separation between each of the different cards. For more information view our spacing guidelines.

Full-bleed

Full-bleed cards are a convenient way of displaying a list of items that are easily scannable such as contests or news items. Full-bleed cards have no outer spacing at either side ensuring the cards touch the edge of the screen. Inner spacing is the same on all cards.

Android and iOS

Full-bleed native cards have a Grey border of 1 top and bottom.

Web

Full-bleed web cards have a drop shadow and no borders. See our web shadow properties above for more information.

Padding

The inner padding is crucial to ensuring that there is consistent and adequate spacing within each card. The padding also ensures that content within different cards is vertically aligned creating a quickly scannable list.

Across all screen sizes the padding is set to 16 ensuring correct alignment across different cards.

The header can be used to frame the section itself with a title. This is especially useful if there’s going to be multiple cards on one page. The header should include a bottom border of 1 with a heading text size of 16. Optional extras include tabs and a date.

Across all screen sizes the header text size is set to 16 with 16 padding.

The default footer contains links that allow the user to navigate and access additional information if and when required. The footer uses the card highlight color Grey lighten 5 as its background and also includes a 1 top border of Grey with a text size of 14.

Across all screen sizes the padding has been set to 16.

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 were we may want to set a max height on certain cards to be 290. With this in mind the View more component attaches to the bottom of the card with a background gradient to transparent. When clicked the card expands to its natural size with the View more text becoming View less and the arrow changing direction.

Balloons

Balloons are used to visually connect a card to another element. Balloons can feature an arrow on any side to connect directly to the other element. For example when illustrating that a message or invitation has been sent or received. Optional extras include links and buttons.

Across all screen sizes the balloon arrows sit 16 from the the nearest corner. The arrow is 16 in height with a width of 8.

web Notification center The balloon in this example is positioned on the top of the card.