Cards (Version 2) - Examples and Code

Cards provide self-contained blocks of content (such as news stories, profiles, events, etc) usually with a title, image, and a small text block, often with images. They work best when displayed as a group in a grid. They are designed to be flexible and support a wide variety of different layouts, pieces of content, and designs. Usually all cards within a single grid should use the same style for consistency and visual repetition.

Examples of Card Styles

(Note: You should normally only use one style of card per grid, the following is merely an example of different types and layouts of cards you can construct).

Researcher holding owl
Mar
21
Title Element
Optional Subtitle Element
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua. Stet clita kasd gubergren, no sea takimata sanctus est.v
Mar 21 2020
Title Element
Optional Subtitle Element
Researcher holding owl

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.

At vero eos et accusam, et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus

Title Element
Optional Subtitle Element
Researcher holding owl
At vero eos et accusam, et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua.
Title Element
Optional Subtitle Element
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua. Stet clita kasd gubergren, no sea takimata sanctus est.
Researcher holding owl
Title Element
Optional Subtitle Element
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua. Stet clita kasd gubergren, no sea takimata sanctus est.
Researcher holding owl
Title Element
Optional Subtitle Element
Researcher holding owl
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua. Stet clita kasd gubergren, no sea takimata sanctus est.