Cores
-
bg-main-primary -
bg-main-secondary -
bg-contrast-primary -
bg-contrast-secondary -
bg-interactive-main -
bg-interactive-contrast -
bg-cta-main -
bg-cta-contrast -
bg-error -
bg-alert -
bg-success
-
border-color-primary -
border-color-secondary -
border-color-interactive-main -
border-color-interactive-contrast -
border-color-cta-main -
border-color-cta-contrast -
border-color-error -
border-color-alert -
border-color-success
-
texto
color-main-primary -
texto
color-main-secondary -
texto
color-contrast-primary -
texto
color-contrast-secondary -
texto
color-interactive-main -
texto
color-interactive-contrast -
texto
color-cta-main -
texto
color-cta-contrast -
texto
color-error -
texto
color-alert -
texto
color-success
Tema
Principal primário
Texto sem definição de cor.
Texto principal secundário.
exemplo de código
| Coluna 1 | Coluna 2 | Coluna 3 |
|---|---|---|
| Coluna 1 | Coluna 2 | Coluna 3 |
| Coluna 1 | Coluna 2 | Coluna 3 |
Contraste primário
Texto sem definição de cor.
Texto principal secundário.
exemplo de código
| Coluna 1 | Coluna 2 | Coluna 3 |
|---|---|---|
| Coluna 1 | Coluna 2 | Coluna 3 |
| Coluna 1 | Coluna 2 | Coluna 3 |
Principal secundário
Contraste secundário
Erro
Alerta
Sucesso
Borda
-
border -
border-dashed -
border-dotted
-
border-sm -
border-dashed-sm -
border-dotted-sm
-
border-md -
border-dashed-md -
border-dotted-md
-
border-lg -
border-dashed-lg -
border-dotted-lg
Tamanho de fonte
- Texto
text-up-1 -
Texto
text-up-2 - Texto
text-up-3 - Texto
text-up-4 - Texto
text-up-5 - Texto
text-up-6 - Texto
text-up-7 -
Texto
text-up-8 - Texto
text-base - Texto
text-down-1 - Texto
text-down-2 - Texto
text-down-3 - Texto
text-down-4
Peso de fonte
-
Texto
text-weight-thin -
Texto
text-weight-extra-light -
Texto
text-weight-light -
Texto
text-weight-regular -
Texto
text-weight-medium -
Texto
text-weight-semi-bold -
Texto
text-weight-bold -
Texto
text-weight-extra-bold -
Texto
text-weight-black
Camada e sombra
- Texto
level-0 - Texto
level-1 - Texto
level-2 - Texto
level-3 - Texto
level-4
Arredondamento
-
rounder-sm -
rounder-md -
rounder-lg -
rounder-full
Margin
-
Texto
m-0 -
Texto
m-1 -
Texto
m-2 -
Texto
m-3 -
Texto
m-4 -
Texto
m-5 -
Texto
m-6 -
Texto
m-7 -
Texto
m-8 -
Texto
m-9 -
Texto
m-10
Padding
-
Texto
p-0 -
Texto
p-1 -
Texto
p-2 -
Texto
p-3 -
Texto
p-4 -
Texto
p-5 -
Texto
p-6 -
Texto
p-7 -
Texto
p-8 -
Texto
p-9 -
Texto
p-10
Gap
-
gap-1 -
gap-2 -
gap-3 -
gap-4 -
gap-5 -
gap-6 -
gap-7 -
gap-8 -
gap-9 -
gap-10
Opacidade
-
opacity-none -
opacity-10 -
opacity-20 -
opacity-30 -
opacity-40 -
opacity-50 -
opacity-60 -
opacity-70 -
opacity-80 -
opacity-90 -
opacity-full