Espaçamentos
Conceito
O espaçamento é uma parte importante para fornecer layouts claros e funcionais.
Escala de espaçamento
Use a escala de espaçamento ao construir componentes individuais. Inclui pequenos incrementos necessários para criar relacionamentos espaciais apropriados para projetos de níveis de detalhe. Esta escala é aplicada e usada em todos os componentes da VERT.
| Token | rem | px | Example |
|---|---|---|---|
| spacing-01 | 0.125 | 2 | |
| spacing-02 | 0.25 | 4 | |
| spacing-03 | 0.5 | 8 | |
| spacing-04 | 0.75 | 12 | |
| spacing-05 | 1 | 16 | |
| spacing-06 | 1.5 | 24 | |
| spacing-07 | 2 | 32 | |
| spacing-08 | 2.5 | 40 | |
| spacing-09 | 3 | 48 | |
| spacing-10 | 4 | 64 | |
| spacing-11 | 5 | 80 | |
| spacing-12 | 6 | 96 | |
| spacing-13 | 10 | 160 |
Exemplo de tokens de espaçamento aplicados
spacing-06
Categoria 1
16/07/2021
spacing-06
Turpis ullamcorper
spacing-05
Consequat et ipsum faucibus hendrerit egestas mauris vel pellentesque. Dictum morbi convallis
spacing-08
SAIBA MAIS
spacing-06