A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.
Default Card
Lorem ipsum dolor sit amet. Consectetur adipiscing elit.
<div class="card"> <div class="card-main"> <div class="card-inner"> ... </div> <div class="card-action"> ... </div> </div> </div>
Brand
<div class="card card-brand"> <div class="card-main"> <div class="card-inner"> ... </div> <div class="card-action"> ... </div> </div> </div>
Brand Accent
<div class="card card-brand-accent"> <div class="card-main"> <div class="card-inner"> ... </div> <div class="card-action"> ... </div> </div> </div>
.card-green
.card-orange
.card-red
Some Text!
<div class="card"> <div class="card-main"> <div class="card-header"> ... <div class="card-inner"> ... </div> </div> <div class="card-img"> ... <p class="card-img-heading"> ... </p> </div> <div class="card-inner"> ... </div> <div class="card-action"> ... </div> </div> </div>
Primary Area!
<div class="card"> <aside class="card-side pull-left"> ... </aside> <div class="card-main"> ... </div> </div>