Bordas
Responsivo
Para aplicar classes utilitárias em um breakpoint específico, adicione o prefixo adequado a classe existente.
Border Color
Utilitários para controlar a cor das bordas de um elemento
| Classe | Propriedades |
|---|---|
.z--border-{token} | border-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:
Border Style
Utilitários para controlar o estilo das bordas de um elemento
| Classe | Propriedades |
|---|---|
.z--border-solid | border-style: solid; |
.z--border-dashed | border-style: dashed; |
.z--border-dotted | border-style: dotted; |
.z--border-none | border-style: none; |
Referências:
Border Width
Utilitários para controlar a largura das bordas de um elemento
| Classe | Propriedades |
|---|---|
.z--border-{token} | border: {token}; |
.z--border-t-{token} | border-top: {token}; |
.z--border-r-{token} | border-right: {token}; |
.z--border-b-{token} | border-bottom: {token}; |
.z--border-l-{token} | border-left: {token}; |
Tokens:
| Token | Valor |
|---|---|
1 | 1px |
2 | 2px |
4 | 4px |
none | 0 |
Referências:
Border Radius
Utilitários para controlar o raio da borda de um elemento
| Classe | Propriedades |
|---|---|
.z--rounded-{token} | border-radius: {token}; |
.z--rounded-t-{token} | border-top-left-radius: {token};border-top-right-radius: {token}; |
.z--rounded-r-{token} | border-top-right-radius: {token};border-bottom-right-radius: {token}; |
.z--rounded-b-{token} | border-bottom-right-radius: {token};border-bottom-left-radius: {token}; |
.z--rounded-l-{token} | border-top-left-radius: {token};border-bottom-left-radius: {token}; |
.z--rounded-tl-{token} | border-top-left-radius: {token}; |
.z--rounded-bl-{token} | border-bottom-left-radius: {token}; |
.z--rounded-tr-{token} | border-top-right-radius: {token}; |
.z--rounded-br-{token} | border-bottom-right-radius: {token}; |
Tokens:
| Token | Valor |
|---|---|
none | 0 |
sm | 2px |
md | 4px |
lg | 8px |
full | 9999px |
Referências: