Cards
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
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 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.
<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.
<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.
<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"
<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
<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
<div class="card small">
<!-- Card Content -->
</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.
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.
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.
Card Panel
<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