Tipografia
Responsivo
Para aplicar classes utilitárias em um breakpoint específico, adicione o prefixo adequado a classe existente.
Text Color
Utilitários para controlar a cor do texto de um elemento
| Classe | Propriedades |
|---|---|
.z--text-{token} | color: {token}; |
Tokens:
| Token | Valor |
|---|---|
brand-primary-600 | #46ab21 |
brand-primary-500 | #52c628 |
brand-primary-400 | #5fcf35 |
brand-secondary-600 | #355dd4 |
brand-secondary-500 | #4c78fa |
brand-secondary-400 | #5780fa |
transparent | rgba(0, 0, 0, 0) |
white | #ffffff |
neutral-900 | #23282d |
neutral-800 | #3e4851 |
neutral-700 | #636f7a |
neutral-600 | #8995a0 |
neutral-500 | #b8c2cb |
neutral-400 | #dbe1e5 |
neutral-300 | #f1f5f8 |
neutral-200 | #f6f8fa |
neutral-100 | #fafcfd |
grey-900 | #030303 |
grey-800 | #262626 |
grey-700 | #414141 |
grey-600 | #575757 |
grey-500 | #b5b7b9 |
grey-400 | #dddddd |
grey-300 | #ecedee |
grey-200 | #f7f7f7 |
grey-100 | #ffffff |
red-600 | #871e1e |
red-500 | #b92828 |
red-400 | #fae7e8 |
blue-600 | #004570 |
blue-500 | #0065a4 |
blue-400 | #e2eef6 |
yellow-600 | #755c17 |
yellow-500 | #ffca34 |
yellow-400 | #fff6dd |
green-600 | #005726 |
green-500 | #00893c |
green-400 | #e4f2ea |
facebook-600 | #365899 |
facebook-500 | #4267b2 |
facebook-400 | #476fbf |
linkedin-600 | #006a9c |
linkedin-500 | #067ab1 |
linkedin-400 | #007db8 |
twitter-600 | #1a90d9 |
twitter-500 | #1d9ff0 |
twitter-400 | #1fa9ff |
instagram-600 | #a8258c |
instagram-500 | #c32aa3 |
instagram-400 | #cc2daa |
Referências:
Font Family
Utilitários para controlar a família de fonte de um elemento
| Classe | Propriedades |
|---|---|
.z--font-{token} | font-family: {token}; |
Tokens:
| Token | Valor |
|---|---|
sans | 'Source Sans Pro', sans-serif |
Referências:
Font Size
Utilitários para controlar o tamanho da fonte de um elemento
| Classe | Propriedades |
|---|---|
.z--text-{token} | font-size: {token}; |
Tokens:
| Token | Valor |
|---|---|
2xs | 10px |
xs | 12px |
sm | 14px |
base | 16px |
lg | 18px |
xl | 20px |
2xl | 24px |
3xl | 28px |
4xl | 32px |
5xl | 36px |
6xl | 40px |
Referências:
Font Weight
Utilitários para controlar o peso da fonte de um elemento
| Classe | Propriedades |
|---|---|
.z--font-{token} | font-weight: {token}; |
Tokens:
| Token | Valor |
|---|---|
black | 900 |
extrabold | 800 |
bold | 700 |
semibold | 600 |
medium | 500 |
normal | 400 |
light | 300 |
thin | 200 |
hairline | 100 |
Referências:
Letter Spacing
Utilitários para controlar o tracking (espaçamento entre letras) de um elemento
| Classe | Propriedades |
|---|---|
.z--tracking-{token} | letter-spacing: {token}; |
Tokens:
| Token | Valor |
|---|---|
sm | -0.05em |
md | 0 |
lg | 0.05em |
Referências:
Line Height
Utilitários para controlar a entrelinha (altura da linha) de um elemento
| Classe | Propriedades |
|---|---|
.z--leading-{token} | line-height: {token}; |
Tokens:
| Token | Valor |
|---|---|
2xs | 12px |
xs | 16px |
sm | 20px |
base | 24px |
lg | 28px |
xl | 32px |
2xl | 36px |
3xl | 40px |
4xl | 44px |
5xl | 48px |
6xl | 52px |
Referências:
Lists
Utilitários para controlar estilos de lista
| Classe | Propriedades |
|---|---|
.z--list-reset | list-style: none; padding: 0; |
Style & Decoration
Utilitários para controlar o estilo do texto
| Classe | Propriedades |
|---|---|
.z--italic | font-style: italic; |
.z--normal | font-style: normal; |
.z--uppercase | text-transform: uppercase; |
.z--lowercase | text-transform: lowercase; |
.z--capitalize | text-transform: capitalize; |
.z--normal-case | text-transform: none; |
.z--underline | text-decoration: underline; |
.z--line-through | text-decoration: line-through; |
.z--no-decoration | text-decoration: none; |
.z--antialiased | -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; |
.z--subpixel-antialiased | -webkit-font-smoothing: auto;-moz-osx-font-smoothing: auto; |
Referências:
- font-style - CSS Reference
- text-transform - CSS Reference
- text-decoration - CSS Reference
- font-style - CSS-Tricks
- text-transform - CSS-Tricks
- text-decoration - CSS-Tricks
- font-style - MDN
- text-transform - MDN
- text-decoration - MDN
Text Alignment
Utilitários para controlar o alinhamento do texto
| Classe | Propriedades |
|---|---|
.z--text-left | text-align: left; |
.z--text-center | text-align: center; |
.z--text-right | text-align: right; |
.z--text-justify | text-align: justify; |
Referências:
Vertical Alignment
Utilitários para controlar o alinhamento vertical de um elemento inline ou table-cell
| Classe | Propriedades |
|---|---|
.z--align-baseline | vertical-align: baseline; |
.z--align-top | vertical-align: top; |
.z--align-middle | vertical-align: middle; |
.z--align-bottom | vertical-align: bottom; |
.z--align-text-top | vertical-align: text-top; |
.z--align-text-bottom | vertical-align: text-bottom; |
Referências:
Whitespace, Wrapping & Truncate
Utilitários para controlar o espaço em branco e a disposição de um elemento
| Classe | Propriedades |
|---|---|
.z--whitespace-normal | white-space: normal; |
.z--whitespace-no-wrap | white-space: nowrap; |
.z--whitespace-pre | white-space: pre; |
.z--whitespace-pre-line | white-space: pre-line; |
.z--whitespace-pre-wrap | white-space: pre-wrap; |
.z--break-words | word-wrap: break-word; |
.z--break-normal | word-wrap: normal; |
.z--truncate | overflow: hidden;text-overflow: ellipsis;white-space: nowrap; |
Referências: