Exibição

Card, panel e tile

As três camadas de superfície: casca, miolo e azulejo. A profundidade vem delas, não de sombra.

só CSS

Exemplo

Receita recorrente

R$ 48.300 no mês

+14,8%

1.240 contas ativas

Resumo mensal

Casca, miolo e azulejo, sem sombra.

<article class="u-card">
  <div class="u-panel">
    <div class="u-head">
      <div>
        <div class="u-label">Receita recorrente</div>
        <div class="u-big">R$ 48.300 <small>no mês</small></div>
      </div>
      <span class="u-badge u-badge--delta">+14,8%</span>
    </div>
    <div class="u-tile"><b class="u-num">1.240</b> <span class="u-label">contas ativas</span></div>
  </div>
  <div class="u-card__foot">
    <h3 class="u-card__title">Resumo mensal</h3>
    <p class="u-card__desc">Casca, miolo e azulejo, sem sombra.</p>
  </div>
</article>

Instalação

Card, panel e tile vem no pacote completo, em unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

Sem build É só CSS: com unslop.css na página, as classes já funcionam.

Classes e variantes

Classe	O que faz
`u-card`	Casca: --card, borda --line, raio 28, recuo 12.
`u-panel`	Miolo: --panel, raio 16. 28 = 16 + 12, as curvas ficam paralelas.
`u-tile`	Azulejo: --tile, raio 14, dentro do panel.
`u-head`	Linha de cabeçalho: texto à esquerda, controle à direita.
`u-label`	Rótulo pequeno em --`fg-2`.
`u-big`	Número grande, com algarismos de mesma largura. small dentro dele vira a unidade.
`u-num`	Só algarismos de mesma largura, sem mudar o tamanho.
`u-card__foot, u-card__title, u-card__desc`	Título e descrição fora do panel.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
article	elemento	Use article quando o card faz sentido sozinho; div no resto.