Skip to content

Latest commit

 

History

History
32 lines (18 loc) · 1.33 KB

card.md

File metadata and controls

32 lines (18 loc) · 1.33 KB

Cards

The card is a background element that holds some data. It lays over top of the background of the screen. Use this to contain information.

To duplicate the Figma file, go here.

Guidelines

Basic Card

The card comes in two basic varieties. The one on the left is used for multiple cards on a page, that are each not the primary focus. The one on the right is used for when there is a card that is the primary focal element.

The basic card has a drop shadow effect for contrast with the background.

variations

Dark Mode

darkmode

Inline Card

An inline card is nested within another card.

This card has no drop shadow so it nests into the container.

variationinline

Accent Card

An accent card is used to draw focus. Use sparingly.

This card has a drop shadow effect for contrast with the background.

accentcard