Atomics ~ Cards
image
The pinnacle of modern web design

Cards are an extremely popular unit of web design that aim to display content in snack-sized cards that are easy to comprehend. Silva fully embraces the concept of cards and offer rich and flexible display options to cater for many needs.

Basic rendering

At their core, cards have a body element that can contain anything. Optionally, they have a header and/or a footer.

Link variations

Cards can be clickable as a whole, not at all, or not be clickable yet have internal clickable links.

Borders & hero
Equal height cards
Orientation

The hero and content elements can be switched in order, both horizontally and vertically.

Emblems
Media objects inside card body

A beautitful use of the media object atomic is to place it in the card's body element. Below are various media object configurations placed inside cards, both in a normal and a equal height grid.

Overlay mode

In overlay mode, the hero element acts as a full background, with the content element laid on top of it.

Ratio content

Ratio content (content that maintains its aspect ratio) can be placed in any of the cards' sections.