Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Card

Usage notes


Cards group information into flexible containers that allow users to browse a collection of related items and actions. They show a taste of information and reveal more details upon interaction.

Default

OVERLAY Only
Downloads
Girl's eye Girl's lips 2 2 weeks ago
Toggle markup

Quiet

Card Title Card with surrounding link IMAGE 807 x 595 45.7 KB 3
Asset Name (low resolution) Asset description
Card Title Card with SVG content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor justo vitae luctus commodo. Cras dolor erat, pulvinar eget vehicula non, consectetur vel sem. Nam pharetra scelerisque pharetra. Vestibulum id hendrerit tortor.
Toggle markup

With links

Card Title Card with surrounding link IMAGE 807 x 595 45.7 KB 3
Downloads
Card without context
Page title (link) Page description 3
Toggle markup

With SVG asset

Card Title Card with SVG content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor justo vitae luctus commodo. Cras dolor erat, pulvinar eget vehicula non, consectetur vel sem. Nam pharetra scelerisque pharetra. Vestibulum id hendrerit tortor.
Card Title Card with two assets
Toggle markup

With lots of content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra ut urna at dignissim. Duis sed sem accumsan, consectetur lectus sed, dapibus purus. Pellentesque sed felis sed nisi faucibus gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra ut urna at dignissim. 3 3 3 3 3
Toggle markup

With different asset sizes

Page Title Page description 3
Asset Name (low resolution) Asset description
Asset Name (low resolution) Wide asset
Asset Name (low resolution) Asset description
Asset Name (low resolution) Asset description
Toggle markup

Condensed

Running Collection 3
Card Title Empty Card
Card Title
Toggle markup

Inverted

Running Collection 3
Card Title Empty Card
Card Title
Toggle markup

With stacked Banners

Error Asset has expired. Info Asset is published.
Downloads
Girl's eye Image 3 2 weeks ago
Warning Asset will expire. Warning Asset will expire. Warning Asset will expire. Warning Asset will expire. Warning Asset will expire. Warning Asset will expire. Warning Asset will expire.
Downloads
Girl's eye Image 3 2 weeks ago
Yellow Tag Error Asset has expired. INFO Workflow has started.
Girl's eye Image 3 2 weeks ago
Toggle markup

Wide cards

Downloads
Girl's eye Girl's lips 2 2 weeks ago
Toggle markup