Card SM
Corpo do card com texto de exemplo.
Sistema visual
Componentes e tokens de arquivos-modulos.
Buttons
Variantes de buttons.css.
Primários
Danger / Warning
Toggle
Inputs
Campos de inputs.css.
Alerts
Objetos de alert.css (ícones SVG em assets/icons se existirem).
Sucesso
Operação concluída com sucesso.
Atenção
Revise os dados antes de continuar.
Erro
Não foi possível salvar.
Cards
Objetos de card.css.
Panel Card
Objeto de panel-card.css.
Resumo
group
Usuários
1.248
Ativos no mês
payments
Receita
R$ 42k
+12% vs anterior
task_alt
Tarefas
86%
Concluídas
Info Stat
Objeto isolado de info-stat.css.
trending_up
Crescimento
+18%
Comparado ao trimestre anterior
Modal
Painel de modal.css (sem overlay fixo, só o objeto).
Título do modal
Conteúdo interno do modal para visualização do componente.
Dropdown
Objeto de dropdown.css (aberto com .is-open).
Status
Tooltips
Objetos de tooltips.css e iconTolltip.css (passe o mouse).
Tooltip padrão
Título com ícone
Table
Objeto de table.css.
| Status | Ações | ||
|---|---|---|---|
|
A
|
Ativo |
|
|
|
B
|
Pendente |
|
Pagination
Objeto isolado de pagination.css.
Status
Objetos de status.css.
Sim · Não · N/A
Datepicker
Objetos de datepicker.css.
Agosto 2026
D
S
T
Q
Q
S
S
Calendar
Objeto de calendars.css (amostra reduzida).
Agosto 2026
1 ago 2026 – 31 ago 2026
Dom
Seg
Ter
Qua
Qui
Sex
Sáb
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Page
Layout de page.css.
Cabeçalho da página
Descrição curta da seção.
Seção
Conteúdo da seção de página.
Shadows
Tokens de shadows.css (--shadow-*).
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-3xl
Spacing & Grids
Tokens de spacing-grids-radius.css (spacing, containers e grids).
Spacing
--spacing-1
4px
--spacing-2
8px
--spacing-3
12px
--spacing-4
16px
--spacing-5
20px
--spacing-6
24px
--spacing-8
32px
--spacing-10
40px
--spacing-12
48px
--spacing-16
64px
--spacing-20
80px
--spacing-24
96px
--spacing-32
128px
--spacing-40
160px
--spacing-48
192px
--spacing-56
224px
--spacing-64
256px
Containers
--container-sm
640px
--container-md
768px
--container-lg
1024px
--container-xl
1280px
Grids
Desktop 12 · Tablet 6 · Mobile 5 colunas · gutters
--grid-desktop-gutter /
--grid-tablet-gutter /
--grid-mobile-gutter
--container-grid-12
--container-grid-6
--container-grid-5
Typography
Classes de typography.css.
Display LG
Display MD
Display SM
Text XL
Text MD regular
Text SM semibold
