Container
As containers são responsivas de acordo com a resolução do usuário.
Resolução acima de 1400px a largura máxima é 1220px
Resolução acima de 1200px a largura máxima é 1140px (aqui entra a resolução mais comum de Desktop: 1366px x 768px)
Resolução acima de 992px a largura máxima é 960px
Resolução acima de 768px a largura máxima é 720px
Resolução acima de 576px a largura máxima é 540px
Resolução abaixo de 575px a largura é 100% (aqui entra Mobile)
Container Fluida
A container fluida ocupa 100% a largura do monitor, independente da resolução
Heading Tags
H1 – texto com h1
em resolução acima de 1367px: 2.5rem (x16px = 40px)*
em resolução acima de 1200px: 2.25rem (x16px = 36px)*
em resolução abaixo de 1200px: calc(1.375rem + 1.5vw) **
em resolução 376px: 27.64px **
H2 – texto com h2
em resolução acima de 1367px: 2rem (x16px = 32px)*
em resolução acima de 1200px: 1.75rem (x16px = 28px)*
em resolução abaixo de 1200px: calc(1.325rem + 0.9vw) **
em resolução 376px: 24.58px **
H3 – texto com h3
em resolução acima de 1367px: 1.75rem (x16px = 28px)*
em resolução acima de 1200px: 1.5rem (x16px = 24px)*
em resolução abaixo de 1200px: calc(1.3rem + 0.6vw) **
em resolução 376px: 23.06px **
H4 – texto com h4
em resolução acima de 1367px: 1.5rem (x16px = 24px)*
em resolução acima de 1200px: 1.25rem (x16px = 20px)*
em resolução abaixo de 1200px: calc(1.275rem + 0.3vw) **
em resolução 376px: 21.53px **
H5 – texto com h5
em resolução acima de 1200px: (x16px = 20px)*
em resolução abaixo de 1200px: (x16px = 16,8px)*
H6 – texto com h6
em resolução acima de 1200px: 1rem (x16px = 16px)*
em resolução abaixo de 1200px: .85rem (x16px = 13,6px)*
OBS: Por padrão, todas as Heading Tags possuem: margin-bottom: 0.5rem e line-height:1.2
* Rem para obter os valores em PX é preciso multiplicar por 16px
** VW é a largura do dispositivo do usuário e 1vw equivale a 1% da largura do dispositivo.
O cálculo é aplicado para resoluções menores de 1200px, ou seja Mobile e Tablets.
Exemplo na prática do VW abaixo:
H1 font-size: calc(1.375rem + 1.5vw) em um smartphone com 430px de largura
1rem = 16px / valor do rem = 1.375rem * 16px = 22px
Viewport Width = 430px / valor do VW = 1.5 * (430px / 100 = 4,3) = 6,45px
Soma => 22px + 6,45px = 28,45px valor do H1
Texto
Texto com P
Tamanho da fonte: 1rem (x16px = 16px)*
Nome da fonte: Nunito Sans Light
Texto com B
Tamanho da fonte: 1rem (x16px = 16px)*
Nome da fonte: Nunito Sans Light
Peso da fonte: Bolder
Texto com SMALL
Tamanho da fonte: 0.75rem (x16px = 12px)*
Nome da fonte: Nunito Sans Light
* Rem para obter os valores em PX é preciso multiplicar por 16px
Fontes – Exo2
Exo2 extralight 200
Exo2 light 300
Exo2 regular 400
Exo2 medium 500
Exo2 semibold 600
Exo2 bold 700
Exo2 extrabold 800
Exo2 black 900
Fontes – Nunito Sans
Nunito Sans Extralight 200
Nunito Sans Light 300
Nunito Sans Regular 400
Nunito Sans Semibold 500
Nunito Sans Bold 600
Nunito Sans Extrabold 800
Nunito Sans Black 900
Cores – background
Bg Power Blue
Bg Power Blue 100
Bg Power Blue 200
Bg Power Blue 300
Bg Power Blue 400
Bg Power Blue 500
Bg Power Blue 600
Bg Power Blue 700
Bg Power Blue 800
Bg Power Blue 900
Bg Power Blue 1000
Bg Magic Purple
Bg Magic Purple 100
Bg Magic Purple 200
Bg Magic Purple 300
Bg Magic Purple 400
Bg Magic Purple 500
Bg Magic Purple 600
Bg Magic Purple 700
Bg Magic Purple 800
Bg Magic Purple 900
Bg Magic Purple 1000
Bg Eletric Pink
Bg Eletric Pink 100
Bg Eletric Pink 200
Bg Eletric Pink 300
Bg Eletric Pink 400
Bg Eletric Pink 500
Bg Eletric Pink 600
Bg Eletric Pink 700
Bg Eletric Pink 800
Bg Eletric Pink 900
Bg Eletric Pink 1000
Bg Neutral Light
Bg Neutral Light 100
Bg Neutral Light 200
Bg Neutral Light 300
Bg Neutral Light 400
Bg Neutral Light 500
Bg Neutral Light 600
Bg Neutral Light 700
Bg Neutral Light 800
Bg Neutral Light 900
Bg Neutral Light 1000
Cores – Textos
Texto Power Blue
Texto Power Blue 100
Texto Power Blue 200
Texto Power Blue 300
Texto Power Blue 400
Texto Power Blue 500
Texto Power Blue 600
Texto Power Blue 700
Texto Power Blue 800
Texto Power Blue 900
Texto Power Blue 1000
Texto Magic Purple
Texto Magic Purple 100
Texto Magic Purple 200
Texto Magic Purple 300
Texto Magic Purple 400
Texto Magic Purple 500
Texto Magic Purple 600
Texto Magic Purple 700
Texto Magic Purple 800
Texto Magic Purple 900
Texto Magic Purple 1000
Texto Eletric Pink
Texto Eletric Pink 100
Texto Eletric Pink 200
Texto Eletric Pink 300
Texto Eletric Pink 400
Texto Eletric Pink 500
Texto Eletric Pink 600
Texto Eletric Pink 700
Texto Eletric Pink 800
Texto Eletric Pink 900
Texto Eletric Pink 1000
Icones
icon-arrows-up-down-left-right
icon-newsletter-subscribe
Vídeo Youtube
Para não impactar negativamente no Page Speed, o carregamento deve ser feito no click do video.
Visualizar o script editando esse arquivo
Componentes
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
-
Título H5
Texto em P. Cores e Ícones carregadas do guia de HTML
