For a simpler card with less markup, try using a card panel which just has padding and a shadow effect.
Cards
bookmarkCards 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.
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.
Here is the standard card with a horizontal image.
![](../assets/images/horizontal.jpeg.jpg)
I am a very simple card. I am good at containing small bits of information.
Here is the standard card with an image thumbnail.
![](../assets/images/nature6.jpg)
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.
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.
![](../assets/images/nature5.jpg)
Here is some more information about this product that is only revealed once clicked on.
Here is an image card with a Floating Action Button.
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.
Here is an image card with a large Floating Action Button.
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.
The default state is having the card-reveal go over the card-action.
Here is an image card with a large Floating Action Button.
You can add tabs to your cards by adding a dividing cards-tabs
div inbetween your header content and your tab content.
Basic white background card with tabs.
If you want to have uniformly sized cards, you can use our premade size classes. Just add the size class in addition to the card class.
Basic white background card with tabs.
![](../assets/images/nature1.jpg)
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.
The Medium Card limits the height of the card to 400px.
![](../assets/images/nature1.jpg)
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.
The Large Card limits the height of the card to 500px.
![](../assets/images/nature1.jpg)
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.