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
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.
<div class="row">
<div class="col xs12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>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.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div<
</div<
</div<
</div<
Hoverable Card
The hoverable is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.
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.
<div class="card-panel hoverable"> Hoverable Card Panel</div>
Image Card
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 an image thumbnail.
<div class="row">
<div class="col xs12 m7">
<div class="card">
<div class="card-image">
<img src="http://lorempixel.com/1024/768/abstract/"span class="token punctuation">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>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.</p>
</div>
<div class="card-action">
<a href="#">This is a link
</div>
</div>
</div>
</div>
Card Reveal
Here is some more information about this product that is only revealed once clicked on.
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.
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/office.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p><a href="#">This is a link
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
Card Sizes
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.
<div class="card small">
</div>
Small
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 Small Card limits the height of the card to 300px.
Medium
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.
Large
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.
Card Panel
For a simpler card with less markup, try using a card panel which just has padding and a shadow effect
<div class="row">
<div class="col xs12 m5">
<div class="card-panel grey lighten-5">
<span class="white-text">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.
</span>
</div>
</div>
</div>