Cards

The card component displays related content — such as photos, icons, text, and links — that are all about a single subject. A card serves as an entry point to more detailed information.

Card

London Calling

London calling to the faraway towns. Now war is declared and battle come down. London calling to the underworld. Come out of the cupboard, you boys and girls.

Card with Action

You shake my nerves and you rattle my brain, too much love drives a man insane. You broke my will, but what a thrill. Goodness gracious, great balls of fire.

Action

Card with Action and Header

Ring of Fire

I fell into a burnin' ring of fire. I went down, down, down and the flames went higher. And it burns, burns, burns. The ring of fire, the ring of fire.

Action

Card with Hover

This Must Be The Place

Home is where I want to be, pick me up and turn me round. I feel numb - born with a weak heart. I guess I must be having fun.

<!-- Card -->
<div class="card">
<div class="card-content">
<h1>London Calling</h1>
<p>London calling to the faraway towns. Now war is declared and battle come down. London calling to the underworld. Come out of the cupboard, you boys and girls.</p>
</div>
<div class="card-action">
<a>Action</a>
</div>
</div>

<!-- Card with Action -->
<div class="card">
<div class="card-content">
<p>You shake my nerves and you rattle my brain, too much love drives a man insane. You broke my will, but what a thrill. Goodness gracious, great balls of fire.</p>
</div>
<div class="card-action">
<a>Action</a>
</div>
</div>

<!-- Card with Action and Header -->
<div class="card">
<div class="card-header">
<h2 class="card-title">Ring of Fire</h2>
</div>
<div class="card-content">
<p>I fell into a burnin' ring of fire. I went down, down, down and the flames went higher. And it burns, burns, burns. The ring of fire, the ring of fire.</p>
</div>
<div class="card-action">
<a>Action</a>
</div>
</div>

<!-- Card with Hover -->
<div class="card hover">
<div class="card-content">
<h1>London Calling</h1>
<p>London calling to the faraway towns. Now war is declared and battle come down. London calling to the underworld. Come out of the cupboard, you boys and girls.</p>
</div>
<button class="secondary">
Action
</button>
</div>