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

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.

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.

Image Card

Here is the standard card with an image thumbnail.

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.

Card Reveal

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

Card Title

This is a link

Card Title

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


Menu's and few food photos can be added on the left & right column .