Cards usage

There are many different variations of cards. You can make each card with the blocks provided. Each block has sub classes to follow the design specs.

Image with text

A very basic card with just an image and text. The .card-top class makes sure the image gets rounded edges.

This is supporting text.
		
<div class="card">
  <img src="/images/album-example.jpg" class="card-top">

  <div class="card-supporting">
    This is supporting text.
  </div>
</div>
		
	

Avatar, title and subtitle

The .card-avatar class makes sure the image gets the right styling. The .card-primary-small class makes the title smaller. The .card-primary-additional and .card-supporting-additional classes gives the right padding's. The .card-actions class gives the right margins between actions.

This is a title
Subhead
This is supporting text.
		
<div class="card">
  <img src="/images/profile-icon.jpg" class="card-avatar">
  <div class="card-primary card-primary-small card-primary-additional">
    This is a title
    <div class="subhead-1">Subhead</div>
  </div>
  <img src="/images/album-example.jpg">

  <div class="card-supporting card-supporting-additional">
    This is supporting text.
  </div>

  <div class="card-actions">
    <button class="flat-button">Action 1</button>
    <button class="flat-button">Action 2</button>
  </div>
</div>
		
	

Full background image

The .card-background class will make sure the image has rounded edges and is the background of the card. The .card-content class is used to make the text white and gives the background an scrim. NOTE* .card-content class might change.

Title goes here
Subtitle goes here
		
<div class="card">
  <img src="/images/album-example.jpg" class="card-background">

  <div class="card-content">
    <div class="card-primary card-primary-additional">
      Title goes here
      <div class="subhead-1">Subtitle goes here</div>
    </div>

    <div class="card-actions">
      <button class="flat-button">Action 1</button>
      <button class="flat-button">Action 2</button>
    </div>
  </div>
</div>
		
	

Resources