Backgrounds
Responsivo
Para aplicar classes utilitárias em um breakpoint específico, adicione o prefixo adequado a classe existente.
Background Attachment
Utilitários para controlar como uma imagem de plano de fundo se comporta ao rolar
| Classe | Propriedades |
|---|---|
.z--bg-fixed | background-attachment: fixed; |
.z--bg-local | background-attachment: local; |
.z--bg-scroll | background-attachment: scroll; |
Referências:
Background Color
Utilitários para controlar a cor de fundo de um elemento
| Classe | Propriedades |
|---|---|
.z--bg-{token} | background-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:
Background Position
Utilitários para controlar a posição da imagem de plano de fundo de um elemento
| Classe | Propriedades |
|---|---|
.z--bg-bottom | background-position: bottom; |
.z--bg-center | background-position: center; |
.z--bg-left | background-position: left; |
.z--bg-left-bottom | background-position: left bottom; |
.z--bg-left-top | background-position: left top; |
.z--bg-right | background-position: right; |
.z--bg-right-bottom | background-position: right bottom; |
.z--bg-right-top | background-position: right top; |
.z--bg-top | background-position: top; |
Referências:
Background Repeat
Utilitários para controlar a repetição da imagem de fundo de um elemento
| Classe | Propriedades |
|---|---|
.z--bg-repeat | background-repeat: repeat; |
.z--bg-no-repeat | background-repeat: no-repeat; |
.z--bg-repeat-x | background-repeat: repeat-x; |
.z--bg-repeat-y | background-repeat: repeat-y; |
Referências:
Background Size
Utilitários para controlar o tamanho da imagem de fundo de um elemento
| Classe | Propriedades |
|---|---|
.z--bg-auto | background-size: auto; |
.z--bg-cover | background-size: cover; |
.z--bg-contain | background-size: contain; |
Referências: