Utilitário
Border
Classes utilitárias para bordas: largura, estilo, cor, opacidade e gradientes.
Classes base
| Classe CSS | Descrição |
|---|---|
.border | borda em todos os lados |
.border-top | borda superior |
.border-bottom | borda inferior |
.border-left | borda esquerda |
.border-right | borda direita |
Sem especificar largura, estilo ou cor, as classes base aplicam uma borda
1px sólida usando var(--color-contrast-higher)
com 10% de opacidade.
Border width
| Classe CSS | Descrição |
|---|---|
.border-2 | border-width: 2px; |
.border-3 | border-width: 3px; |
.border-4 | border-width: 4px; |
<div class="border-top border-3"></div>Border style
| Classe CSS | Descrição |
|---|---|
.border-dotted | border-style: dotted; |
.border-dashed | border-style: dashed; |
<div class="border-bottom border-2 border-dashed"></div>Border color
Contraste
| Classe CSS | Descrição |
|---|---|
.border-contrast-lower | border-color: var(--color-contrast-lower); |
.border-contrast-low | border-color: var(--color-contrast-low); |
.border-contrast-medium | border-color: var(--color-contrast-medium); |
.border-contrast-high | border-color: var(--color-contrast-high); |
.border-contrast-higher | border-color: var(--color-contrast-higher); |
Primary
| Classe CSS | Descrição |
|---|---|
.border-primary-darker | border-color: var(--color-primary-darker); |
.border-primary-dark | border-color: var(--color-primary-dark); |
.border-primary | border-color: var(--color-primary); |
.border-primary-light | border-color: var(--color-primary-light); |
.border-primary-lighter | border-color: var(--color-primary-lighter); |
Accent
| Classe CSS | Descrição |
|---|---|
.border-accent-darker | border-color: var(--color-accent-darker); |
.border-accent-dark | border-color: var(--color-accent-dark); |
.border-accent | border-color: var(--color-accent); |
.border-accent-light | border-color: var(--color-accent-light); |
.border-accent-lighter | border-color: var(--color-accent-lighter); |
Feedback
| Classe CSS | Descrição |
|---|---|
.border-success-darker | border-color: var(--color-success-darker); |
.border-success-dark | border-color: var(--color-success-dark); |
.border-success | border-color: var(--color-success); |
.border-success-light | border-color: var(--color-success-light); |
.border-success-lighter | border-color: var(--color-success-lighter); |
.border-warning-darker | border-color: var(--color-warning-darker); |
.border-warning-dark | border-color: var(--color-warning-dark); |
.border-warning | border-color: var(--color-warning); |
.border-warning-light | border-color: var(--color-warning-light); |
.border-warning-lighter | border-color: var(--color-warning-lighter); |
.border-error-darker | border-color: var(--color-error-darker); |
.border-error-dark | border-color: var(--color-error-dark); |
.border-error | border-color: var(--color-error); |
.border-error-light | border-color: var(--color-error-light); |
.border-error-lighter | border-color: var(--color-error-lighter); |
Preto & branco
| Classe CSS | Descrição |
|---|---|
.border-white | border-color: var(--color-white); |
.border-black | border-color: var(--color-black); |
Background
| Classe CSS | Descrição |
|---|---|
.border-bg-darker | border-color: var(--color-bg-darker); |
.border-bg-dark | border-color: var(--color-bg-dark); |
.border-bg | border-color: var(--color-bg); |
.border-bg-light | border-color: var(--color-bg-light); |
.border-bg-lighter | border-color: var(--color-bg-lighter); |
Border opacity
As classes base aplicam 10% de opacidade por padrão. Você pode ajustar esse
valor sobrescrevendo a custom property --border-opacity-base:
:root {
--border-opacity-base: 0.1; /* opacidade base = 10% */
}Para reaproveitar o mesmo estilo de borda em CSS de componente:
.component {
border: 1px solid alpha(var(--color-contrast-higher), var(--border-opacity-base));
}Ou combine uma classe de cor com uma das classes de opacidade abaixo:
| Classe CSS | Descrição |
|---|---|
.border-opacity-0 | opacidade da borda 0% |
.border-opacity-5% | opacidade da borda 5% |
.border-opacity-10% | opacidade da borda 10% |
.border-opacity-15% | opacidade da borda 15% |
.border-opacity-20% | opacidade da borda 20% |
.border-opacity-25% | opacidade da borda 25% |
.border-opacity-30% | opacidade da borda 30% |
.border-opacity-40% | opacidade da borda 40% |
.border-opacity-50% | opacidade da borda 50% |
.border-opacity-60% | opacidade da borda 60% |
.border-opacity-70% | opacidade da borda 70% |
.border-opacity-75% | opacidade da borda 75% |
.border-opacity-80% | opacidade da borda 80% |
.border-opacity-85% | opacidade da borda 85% |
.border-opacity-90% | opacidade da borda 90% |
.border-opacity-95% | opacidade da borda 95% |
<div class="border border-primary border-opacity-70%"> <!-- conteúdo --> </div>Border gradient
Se você adicionou um gradiente à paleta (ex.: gradiente primary),
pode usar as classes abaixo. Elas usam o pseudo-elemento ::before
— um truque CSS para suportar border-radius em conjunto com
gradientes.
| Classe CSS | Descrição |
|---|---|
.border-gradient-primary | gradiente radial (aplicado via ::before) |
.border-gradient-primary-top-left | gradiente linear para topo-esquerda (aplicado via ::before) |
.border-gradient-primary-top | gradiente linear para o topo (aplicado via ::before) |
.border-gradient-primary-top-right | gradiente linear para topo-direita (aplicado via ::before) |
.border-gradient-primary-right | gradiente linear para a direita (aplicado via ::before) |
.border-gradient-primary-bottom-right | gradiente linear para baixo-direita (aplicado via ::before) |
.border-gradient-primary-bottom | gradiente linear para baixo (aplicado via ::before) |
.border-gradient-primary-bottom-left | gradiente linear para baixo-esquerda (aplicado via ::before) |
.border-gradient-primary-left | gradiente linear para a esquerda (aplicado via ::before) |
<div class="border border-4 border-gradient-primary-right radius-md"></div>