Card

O que é?

Cards servem para agrupar informações e ações de um conteúdo, tornando assim mais fácil para o usuário visualizar, ler e tomar decisões.

Anatomia

1. Contêiner
Comporta todos os elementos do componente.

2. Título
Deve ser específico e comunicar o objetivo da mensagem.

3. Descrição
Deve conter uma mensagem curta e direta.

4. Button link ou button text (opcional)
Button link é usado para encaminhar para outras páginas, seja dentro da plataforma ou não. Button text é usado para abrir modais ou modificações na página, como atualizar.

Tipos de Cards

O componente pode ou não conter botões e ícones. Veja algumas variações de cards abaixo:

Title + Text

<div class="card is-outlined">
  <header class="card-header">
    <div class="card-header-title">Title</div>
  </header>
  <div class="card-content">
    <div class="content">
      Caption
    </div>
  </div>
</div>

---

Title + Text + Button Text

<div class="card is-outlined">
  <header class="card-header">
    <div class="card-header-title">Title</div>
  </header>
  <div class="card-content">
    <div class="content">
      Caption
    </div>
    <button type="button" class="button is-text">Button Text
        <i class="fak fa-grid-small"></i>
    </button>
  </div>
</div>

---

Title + Text + Button Link

<div class="card is-outlined">
  <header class="card-header">
    <div class="card-header-title">Title</div>
  </header>
  <div class="card-content">
    <div class="content">
      Caption
    </div>
    <a>
      <span>Button link</span>
      <span class="icon is-small">
        <i class="far fa-angle-right"></i>
      </span>
    </a>
  </div>
</div>

---

Icon + Title + Text

<div class="card is-outlined">
  <header class="card-header">
    <span class="icon is-medium">
      <i class="fak fa-grid-medium"></i>
    </span>
    <div class="card-header-title">Title</div>
  </header>
  <div class="card-content">
    <div class="content">
      Caption
    </div>
  </div>
</div>

Responsividade

Os cards devem ser aplicados sempre dentro de um container.

<div class="columns is-multiline">
    <div class="column is-3-widescreen is-6-tablet is-12-mobile">
      <div class="card is-outlined">
        Put the card code here
      </div>
    </div>
</div>

Os comportamentos esperados para cada breakpoint são apresentados abaixo.

>=1216px
Em telas maiores ou iguais a 1216px os cards são responsivos, adaptando seu tamanho ao elemento pai, o container. Nesse breakpoint, é possível aplicar até 4 cards por linha. Em caso de apenas um card, use no máximo 8 colunas do grid para garantir boa leiturabilidade.
No Figma, as telas usadas para projetar utilizando 4 cards são 1920x1080 e 1366x768.

>768 e <1216
Em telas menores que 1216px e maiores que 768px de largura apenas dois cards são mostrados por linha e seu tamanho é adaptativo até o breakpoint seguinte. Se for usado apenas um card, não há restrição de número de colunas.
No Figma, a tela usada para projetar para essa resolução é de 1024x768.

<=768px
Em telas mobile é colocado apenas um card por linha e seu tamanho é adaptativo até telas menores.
No Figma, a menor tela usada para projetos mobile é 360x640.