Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.

Basic Card

Basic card good at containing small bits of information.

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Image Card

Here is the standard card with an image thumbnail.

sampleCard Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Card Reveal

Here you can add a card that reveals more information once clicked. Just add the card-revealdiv with a span.card-titleinside to make this work. Add the class activatorto an element inside the card to allow it to open the card reveal.

office
Card Title

This is a link

Card Title

Here is some more information about this product that is only revealed once clicked on.

Card Panel

For a simpler card with less markup, try using a card panel which just has padding and a shadow effect

I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.

Card Size

Small

The Small Card limits the height of the card to 300px.

sampleCard Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Medium

The Medium Card limits the height of the card to 400px.

sampleCard Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Large

The Large Card limits the height of the card to 500px.

sampleCard Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.