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 m8 l6 offset-l3 offset-m2">
<div class="card default">
<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>
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.
<div class="row">
<div class="col s12 m8 l6 offset-l3 offset-m2">
<div class="card">
<div class="card-image">
<img src="../../img/sample-1.jpg alt="image">
<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>
Horizontal Card
I am a very simple card. I am good at containing small bits of information.
<div class="row">
<div class="col s12 m8 l6 offset-l3 offset-m2">
<div class="card horizontal">
<div class="card-image">
<img src="../../img/sample-2.jpg" alt="image">
</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 class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
</div>
Card Reveal
Here is some more information about this product that is only revealed once clicked on.
<div class="row">
<div class="col s12 m8 l6 offset-l3 offset-m2">
<div class="card m-t-no">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="../../img/responsive.jpg" alt="image">
</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>
</div>
</div>
Card Action
<div class="row">
<div class="col s12 m8 l6 offset-l3 offset-m2">
<div class="card m-t-no">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="../../img/responsive.jpg" alt="image" >
</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" style="display: none; transform: translateY(0px);">
<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 class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
Card Sticky Action
<div class="row">
<div class="col s12 m8 l6 offset-l3 offset-m2">
<div class="card sticky-action m-t-no">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="../../img/responsive.jpg" alt="image" >
</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" style="display: none; transform: translateY(0px);">
<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 class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
Card Sizes
Small
The Small Card limits the height of the card to 300px.
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.
Medium
The Medium Card limits the height of the card to 400px.
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.
Large
The Large Card limits the height of the card to 500px.
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.
<div class="card small">
....
</div>
<div class="card Medium">
....
</div>
<div class="card large">
....
</div>
Card Panel
<div class="row">
<div class="col s12 m8 l6 offset-l3 offset-m2">
<div class="card-panel default">
<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>