Cards
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 s12 m6">
<div class="card blue-grey">
<div class="card-content white-text">
<span class="card-title primary-color-text">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>
Image 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.
Here is the standard card with an image thumbnail.
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
<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</a>
</div>
</div>
</div>
</div>
FABs in 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.
Here is an image card with a Floating Action Button.
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
<a class="btn-floating btn-large halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<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>
</div>
</div>
Horizontal Card
I am a very simple card. I am good at containing small bits of information.
Here is the standard card with a horizontal image.
<div class="row">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="imgs/tomcat.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</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="imgs/lime2-splosh_m.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</a></p>
</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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Here is some more information about this product that is only revealed once clicked on.
"Sticky action"
You can make your card-action always visible by adding the class sticky-action to the overall card.
<div class="card sticky-action">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="imgs/lime2-splosh_m.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>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</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>
Tabs in Cards
You can add tabs to your cards by adding a dividing cards-tabs div inbetween your header content and your tab content.
<div class="row">
<div class="col s12 m6">
<div class="card">
<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-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a href="#test1a">Tab 1</a></li>
<li class="tab"><a class="active" href="#test2a">Tab 2</a></li>
<li class="tab"><a href="#test3a">Tab 3</a></li>
</ul>
</div>
<div class="card-content grey lighten-4">
<div id="test1a">Tab 1 content</div>
<div id="test2a">Tab 2 content</div>
<div id="test3a">Tab 3 content</div>
</div>
</div>
</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">
<!-- Card Content -->
</div>
Small
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.
The Small Card limits the height of the card to 300px.
Medium
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.
The Medium Card limits the height of the card to 400px.
Large
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.
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 s12 m5">
<div class="card-panel primary-color">
<span>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>
For more detailed informations please visit: http://materializecss.com/cards.html