Simples card

É possível criar um card usando apenas um classe, veja o exemplo abaixo:

  <div class="card">Este é um simples card</div>            
          

Card com titulo e subtitulo

Este cartão ja possui mais classes que o anterior, porém, possui uma divisão que facilita seu entendimento. Veja abaixo:

<div class="card">
  <div class="card-title">
    <span>Meu titulo</span>
    <p class="card-subtitle">
      Meu subtitulo
    </p>
  </div>
  <div class="card-content">
    Um simples card com titulo e subtitulo
  </div>
</div> 
          

Adicionando um footer

Além das classes utilizadas anteriormente, é possivel adicionar um footer no card com a classe card-footer. Veja um exemplo:

<div class="card">
  <div class="card-content">
    Um card com footer
  </div>
  <div class="card-footer">
    <p>footer do card</p>
  </div>
</div> 
          

Adicionando imagem

Existem duas formas de adicionar imagem em um card, essa que será apresentada, utilizando a classe card para criar o card, porém, existe outra forma de criar card que mostraremos depois.

<div class="card">
  <div class="card-image">
    <img src="https://cdn.pixabay.com/photo/2016/01/13/01/36/bagan-1137015_960_720.jpg" alt="Foto">
  </div>
  <div class="card-content">
    <p>Um card com imagem e texto</p>
  </div>
</div> 
          

A outra forma de criar card é usando direto a classe card-image aconselhamos o seu uso quando necessita criar um card onde a imagem ocupa 100% o card ou ocupe 100% a largura do card. Veja um exemplo abaixo:

<div class="card-image">
  <img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg" alt="Foto">
  <div class="card-content">
    <p>card com imagem ocupando 100% sua largura</p>
  </div>
</div>
          

Alterando cor de fundo

É possível alterar a cor de fundo de um card, para isso, é preciso adicionar como classe o nome de uma cor (ver Paleta de cores). Veja um exemplo abaixo:

<div class="card yellow-light">Cor de fundo yellow-light</div>