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

Quiet

Card with surrounding link Card Title IMAGE 807 x 595 45.7 KB 3 Asset description Asset Name (low resolution)

Card with SVG content Card Title 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.

With links

Card with surrounding link Card Title IMAGE 807 x 595 45.7 KB 3

Downloads

Card without context Page description Page title (link) 3

With SVG asset

With lots of content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra ut urna at dignissim. 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. 3 3 3 3 3

With different asset sizes

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

Condensed

Collection Running 3 Empty Card Card Title Card Title

Inverted

Collection Running 3 Empty Card Card Title Card Title

With stacked Banners

Error Asset has expired. Info Asset is published.

Downloads

Image Girl's eye 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

Image Girl's eye 3 2 weeks ago Yellow Tag Error Asset has expired. INFO Workflow has started. Image Girl's eye 3 2 weeks ago

Wide cards

Downloads

Girl's eye Girl's lips 2 2 weeks ago