1. Tipografia (Utilitários de Texto)
Clique nas tags à direita para copiar a classe correspondente.
Texto Extra Pequeno (text-xs)
Texto Pequeno (text-sm)
Texto Padrão Base (text-base)
Texto Grande (text-lg)
Texto Extra Grande (text-xl)
Fonte Leve (font-light)
Fonte Negrito (font-bold)
Cor Primária (text-primary)
Texto Suave/Muted (text-muted)
2. Sistema de Grids (Múltiplas Colunas)
Use sempre a classe base grid-row junto com a variação desejada.
Grade 50% / 50%
Coluna 1 (50%)
Coluna 2 (50%)
Grade 30% / 70%
30%
70%
Grade 80% / 20%
80%
20%
3. Containers de Layout & Margens
Container de Coluna Única (col-1)
Aplica margens e estrutura padrão para seções verticais.
Aplica margens e estrutura padrão para seções verticais.
Container de 2 Colunas com Cartões (col-2)
Divide em duas telas e aplica fundo branco/sombra nos filhos diretos.
Divide em duas telas e aplica fundo branco/sombra nos filhos diretos.
Margem Topo Pequena (2rem)
Margem Topo Média (3rem)
Margem Topo Grande (5rem)
4. Alertas e Estilos Visuais
Caixa de Sucesso
Caixa de Aviso
Painel Glassmorphism