Skip to main content
Version: 2.0.2

Card

The card component allows you to build a content your text, from several elements such as an image, a title and content. The card is generally used with the responsive grid to adapt to the devices.

Take a look at the grid page to get all the necessary information.

Basic usage

Live Editor
Result

Yosemite national park

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum itaque maxime soluta hic? Iure reiciendis facere qui beatae quasi repellendus, nemo incidunt quod! Quae sed odit illo. Amet, rerum et!

Fill

It is possible to add a background with the class .ms-fill.

Live Editor
Result

Yosemite national park

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum itaque maxime soluta hic? Iure reiciendis facere qui beatae quasi repellendus, nemo incidunt quod! Quae sed odit illo. Amet, rerum et!

Border

It is also possible to add a border with the .ms-border class.

Live Editor
Result

Yosemite national park

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum itaque maxime soluta hic? Iure reiciendis facere qui beatae quasi repellendus, nemo incidunt quod! Quae sed odit illo. Amet, rerum et!

Picture

The card can contain an image, using the .ms-card-pic class.

Live Editor
Result

Yosemite national park

California
...

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum itaque maxime soluta hic? Iure reiciendis facere qui beatae quasi repellendus, nemo incidunt quod! Quae sed odit illo. Amet, rerum et!

You can add content stucked on the image with the .ms-card-pic-stick classe, such as an icon or text.

Live Editor
Result

Yosemite national park

California
...
123

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum itaque maxime soluta hic? Iure reiciendis facere qui beatae quasi repellendus, nemo incidunt quod! Quae sed odit illo. Amet, rerum et!

Horizontally

The card can also be displayed horizontally with the .ms-inline class.

Live Editor
Result
...

Yosemite national park

California

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum itaque maxime soluta hic? Iure reiciendis facere qui beatae quasi repellendus, nemo incidunt quod! Quae sed odit illo. Amet, rerum et!

Section

In order to delimit spaces within the card, it is possible to add one or more sections with .ms-section and .ms-section-bloc classes.

Live Editor
Result

Yosemite national park

Alaska
...

Lorem ipsum dolor sit amet consectetur adipisicing...

Section 1
Lorem, ipsum dolor sit amet consectetur adipisicing elit...

Section 2
Lorem, ipsum dolor sit amet consectetur adipisicing elit...