Utilitário
Margin
Aplica espaçamento externo usando a escala do design system.
Classes
| Classe CSS | Descrição |
|---|---|
.margin-4xs | margin: var(--space-4xs); |
.margin-3xs | margin: var(--space-3xs); |
.margin-2xs | margin: var(--space-2xs); |
.margin-xs | margin: var(--space-xs); |
.margin-sm | margin: var(--space-sm); |
.margin-md | margin: var(--space-md); |
.margin-lg | margin: var(--space-lg); |
.margin-xl | margin: var(--space-xl); |
.margin-2xl | margin: var(--space-2xl); |
.margin-3xl | margin: var(--space-3xl); |
.margin-4xl | margin: var(--space-4xl); |
.margin-auto | margin: auto; |
.margin-0 | margin: 0; |
Os valores de margin (--space-{value})
seguem a escala de espaçamentos.
Lados específicos
Use .margin-{side}-{size} para mirar um lado
específico:
| Classe CSS | Descrição |
|---|---|
.margin-top-xs | margin-top: var(--space-xs); |
.margin-bottom-xl | margin-bottom: var(--space-xl); |
.margin-right-auto | margin-right: auto; |
.margin-left-md | margin-left: var(--space-md); |
Eixo horizontal (left + right)
.margin-x-{size} aplica a mesma margin nos dois lados:
| Classe CSS | Descrição |
|---|---|
.margin-x-sm | margin-left: var(--space-sm); margin-right: var(--space-sm); |
Eixo vertical (top + bottom)
.margin-y-{size} aplica a mesma margin em cima e
embaixo:
| Classe CSS | Descrição |
|---|---|
.margin-y-md | margin-top: var(--space-md); margin-bottom: var(--space-md); |
Responsivo
Adicione o sufixo @{breakpoint} para alterar a margin
em um breakpoint específico:
<div class="margin-md margin-auto@lg"><!-- conteúdo --></div>