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