Cards

A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.

Usage

Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.

Example of a card

How to edit cards

1) Login on PaperFree System
2) Click EDIT on a page car presented
3) Click EDIT next to any card

Content blocks

Cards can be constructed using blocks of content which include:

An optional header
A primary title
Rich media
Supporting text
Actions

These blocks can be organized to promote different types of content. For example, numbers may be emphasized by increasing their typographic scale.

On tablet/desktop, cards should follow the 24dp keyline. See Metrics & Keylines for more information.

Content block types

Rich media

16:9 or 1:1 aspect ratio (recommended)

Actions

Padding: 8dp

Primary title/text

Title: 24sp or 14sp
Subtitle: 14sp
Left and right padding: 16dp on mobile

On tablet/desktop, cards should follow the 24dp keyline. See Metrics & Keylines for more information.

Top padding: 16dp or 24dp (when a large primary title is present)
Bottom padding: 16dp (if there are additional actions or supporting text) or 24dp (no actions or supporting text)

Supporting text

Supporting text: 14sp
Left and right padding: 16dp on mobile

On tablet/desktop, cards should follow the 24dp keyline. See Metrics & Keylines for more information.
Top padding: 16dp
Bottom padding: 24dp (16dp if there are additional actions or text below)

Bullet points (but not their text), images, and buttons may extend outside of the 16dp padding.

Content block combinations

The following examples illustrate some possible combinations of content blocks.