Componentes / Cards

Cards

Cards para agrupar conteudo. Suporte a header, body, footer, 8 variantes de cor, sombras, interatividade e featured.

Card Basico

Header / Body / Footer

Titulo do Card

Conteudo do card com informacoes relevantes para o usuario.

HTML 
<div class="canta-card">
  <div class="canta-card__header">
    <h3 class="canta-card__title">Titulo do Card</h3>
  </div>
  <div class="canta-card__body">
    <p>Conteudo do card.</p>
  </div>
  <div class="canta-card__footer">
    <button class="canta-btn canta-btn--primary canta-btn--sm">Acao</button>
  </div>
</div>

Variantes de Sombra

Small / Medium / Large

Shadow SM

Sombra pequena.

Shadow MD

Sombra media.

Shadow LG

Sombra grande.

HTML 
<div class="canta-card canta-card--shadow-sm">...</div>
<div class="canta-card canta-card--shadow-md">...</div>
<div class="canta-card canta-card--shadow-lg">...</div>

Variantes de Cor

Acento lateral esquerdo com a cor semantica. Use para indicar status, categoria ou prioridade.

Todas as cores

Blue (--blue)

Destaque primario, informacao geral, elementos da marca.

Success (--success)

Operacao concluida, status ativo, aprovado.

Danger (--danger / --error)

Erro, falha, item bloqueado, acao destrutiva.

Warning / Amber (--warning / --amber)

Atencao, pendencia, prazo proximo, requer acao.

Info (--info)

Informacao contextual, dica, nota.

Magenta (--magenta)

Destaque especial, prioridade alta, urgente.

Gray (--gray)

Neutro, inativo, rascunho, arquivado.

Dark (--dark)

Destaque forte, secao principal, header de modulo.

HTML 
<div class="canta-card canta-card--blue">...</div>
<div class="canta-card canta-card--success">...</div>
<div class="canta-card canta-card--danger">...</div>
<div class="canta-card canta-card--warning">...</div>
<div class="canta-card canta-card--info">...</div>
<div class="canta-card canta-card--magenta">...</div>
<div class="canta-card canta-card--gray">...</div>
<div class="canta-card canta-card--dark">...</div>

Card Interativo

Hover e cursor pointer

Card Interativo

Passe o mouse para ver o efeito de hover.

HTML 
<div class="canta-card canta-card--interactive">
  <div class="canta-card__body">
    <h3 class="canta-card__title">Card Interativo</h3>
    <p>Passe o mouse para ver o efeito de hover.</p>
  </div>
</div>

Panel Style

Header com fundo colorido e texto branco, igual ao Bootstrap panel-danger, panel-warning, etc. Ativado com .canta-card--panel + cor.

Panel com header colorido

Panel Blue

Informacao geral, destaque primario da marca.

Panel Success

Operacao concluida, registro aprovado, status ativo.

Panel Danger

Erro critico, registro bloqueado, acao destrutiva.

Panel Warning

Atencao requerida, prazo vencendo, pendencia.

Panel Info

Nota informativa, dica contextual.

Panel Magenta

Prioridade alta, urgente, promocional.

Panel Dark

Modulo principal, secao de destaque.

HTML 
<!-- Adicione .canta-card--panel + cor para header colorido -->
<div class="canta-card canta-card--panel canta-card--blue">
  <div class="canta-card__header">
    <h3 class="canta-card__title">Panel Blue</h3>
  </div>
  <div class="canta-card__body">
    <p>Conteudo do panel.</p>
  </div>
</div>

<!-- Todas as cores: -->
<div class="canta-card canta-card--panel canta-card--success">...</div>
<div class="canta-card canta-card--panel canta-card--danger">...</div>
<div class="canta-card canta-card--panel canta-card--warning">...</div>
<div class="canta-card canta-card--panel canta-card--info">...</div>
<div class="canta-card canta-card--panel canta-card--magenta">...</div>
<div class="canta-card canta-card--panel canta-card--dark">...</div>

Panel Completo

Header colorido + body + footer com botoes. O padrao mais proximo do Bootstrap panel.

Panel com header, body e footer

Resumo Financeiro

R$ 45.230

Receita do mes atual

Pendencias

12

Documentos aguardando aprovacao

Prazos

5

Tarefas vencem esta semana

API

Classe Descricao
.canta-cardClasse base (obrigatoria)
.canta-card__headerCabecalho
.canta-card__bodyConteudo principal
.canta-card__footerRodape com acoes
.canta-card__titleTitulo
.canta-card__subtitleSubtitulo
Sombras
.canta-card--shadow-smSombra pequena
.canta-card--shadow-mdSombra media
.canta-card--shadow-lgSombra grande
.canta-card--shadow-xlSombra extra grande
Cores (acento lateral esquerdo)
.canta-card--blueAzul CANTA (#0050F2)
.canta-card--successVerde sucesso (#22C55E)
.canta-card--dangerVermelho erro (#FF3264). Alias: --error
.canta-card--warningAmber alerta (#F59E0B). Alias: --amber
.canta-card--infoAzul info (#1D4ED8)
.canta-card--magentaMagenta (#FF3264)
.canta-card--grayCinza neutro
.canta-card--darkEscuro
Panel (header colorido)
.canta-card--panelAtiva header com fundo colorido (combine com --blue, --danger, etc.)
Comportamento
.canta-card--interactiveHover com elevacao
.canta-card--featuredBorda top colorida + shadow lg
.canta-card--compactPadding reduzido
.canta-card--horizontalLayout media + conteudo lado a lado