crop_16_9 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

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.

This is a link This is a link 
	            	
<div class="row">
	<div class="col s12 m6">
		<div class="card blue-grey darken-1">
			<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 class="card-action">
				<a href="#">This is a link</a>
				<a href="#">This is a link</a>
			</div>
		</div>
	</div>
</div>

Image Card

Here is the standard card with an image thumbnail.

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.

This is a link 
	            	
<div class="row">
	<div class="col s12 m6 l4">
		<div class="card white">
			<div class="card-image">
				<img src="img/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>

Horizontal Card

Here is the standard card with a horizontal image.

I am a very simple card. I am good at containing small bits of information.

This is a link 
	            	
<div class="row">
	<div class="col s12 m6 l4">
		<div class="card horizontal">
			<div class="card-image">
				<img src="http://lorempixel.com/100/190/nature/10">
			</div>
			<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>

Card Reveal

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.

Card Titlemore_vert

This is a link

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

	            	
<div class="row">
	<div class="col s12 m6 l4">
		<div class="card">
			<div class="card-image waves-effect waves-block waves-light">
				<img class="activator" src="img/office.jpg">
			</div>
			<div class="card-content">
				<span class="card-title activator">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">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 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

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.

This is a link This is a link
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.

This is a link This is a link
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.

This is a link This is a link

Card Panel

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. 
	            	
<div class="row">
	<div class="col s12 m6 l4">
		<div class="card-panel alternative lighten-1">
			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.
		</div>
	</div>
</div>