Basic Cards

Rose

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Scilla

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Tulip

Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Basic Cards

A basic Foundation card consists of a .card class with other containers, such as .card-divider, .card-section and .card-images inside. The .card-section containers are supposed to hold other elements, like text and images.

Beware: If you are building for IE11 users, you must not pop a .card-image inside a .card-section. The image would then get a whole lot of unwanted white space below it. 

The cards on this page have been created to be 'IE11 safe'.

Hot tip: The Foundation class .thumbnail used on the images will give them the nice, white border.

Placeholder Picture

Download this component