Espaçamento
Responsivo
Para aplicar classes utilitárias em um breakpoint específico, adicione o prefixo adequado a classe existente.
Margin
Utilitários para controlar a margem de um elemento
| Classe | Propriedades |
|---|---|
.z--m-{token} | margin: {token}; |
.z--mt-{token} | margin-top: {token}; |
.z--mr-{token} | margin-right: {token}; |
.z--mb-{token} | margin-bottom: {token}; |
.z--ml-{token} | margin-left: {token}; |
.z--mx-{token} | margin-left: {token};margin-right: {token}; |
.z--my-{token} | margin-top: {token};margin-bottom: {token}; |
Tokens:
| Token | Valor |
|---|---|
2 | 2px |
4 | 4px |
8 | 8px |
16 | 16px |
24 | 24px |
32 | 32px |
40 | 40px |
48 | 48px |
56 | 56px |
64 | 64px |
72 | 72px |
80 | 80px |
none | 0 |
auto | auto |
Referências:
Padding
Utilitários para controlar o padding de um elemento
| Classe | Propriedades |
|---|---|
.z--p-{token} | padding: {token}; |
.z--pt-{token} | padding-top: {token}; |
.z--pr-{token} | padding-right: {token}; |
.z--pb-{token} | padding-bottom: {token}; |
.z--pl-{token} | padding-left: {token}; |
.z--px-{token} | padding-left: {token};padding-right: {token}; |
.z--py-{token} | padding-top: {token};padding-bottom: {token}; |
Tokens:
| Token | Valor |
|---|---|
2 | 2px |
4 | 4px |
8 | 8px |
16 | 16px |
24 | 24px |
32 | 32px |
40 | 40px |
48 | 48px |
56 | 56px |
64 | 64px |
72 | 72px |
80 | 80px |
none | 0 |
Referências: