Styleguide
Petros Styleguide
Tipografia
Giant
Hero
h2
h3
h4
h5
h6
Giant
Hero
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Paragraph
SmallCores
Pretos e brancos
Branco
#FFFFFF
color-white
Cinza
#D8DCDF
color-gray
Preto
#212429
color-black
Noite
#1A1D23
color-darkest-gray
Grafite
#495057
color-dark-blue
Cinza escuro
#ACB5BD
color-blue-gray
Algodão
#E8E8E8
color-blue-gray-light
Polar
#F1F3F5
color-blue-gray-dark
Porcelana
#EEF0F2
color-gray-background
Neve
#F8F8F8
color-white-gray
Gelo
#F8F9FA
color-light-blue
Gelo
#F8F9FA
color-light-blue
Pérola
#F3F6F9
color-pearl
Prata
#D7DCE4
color-silver
Brand
Azul oxford
#001A2F
color-blue-oxford
Azul escuro
#002F56
color-primary
Safira
#144C80
color-sapphire
Azul céu
#296597
color-blue-sky
Azul
#2A6BA7
color-blue
Azul bb
#689CCC
color-blue-baby
Aquamarine Opaco
#E6F0EF
color-secondary-opaque
Aquamarine
#81B3B0
color-secondary
Turquesa
#17847B
color-green
Teal
#126861
color-dark-green
Laranja escuro
#BE7518
color-dark-orange
Laranja
#DE8E28
color-attention
Laranja claro
#E4A759
color-light-orange
Indicativos
Níquel
#A8A8A8
color-gray-graph
Verde
#549A33
color-green-graph
Vermelho
#FF3E13
color-red-graph
Carmesin
#FFECE7
color-red-carmesin
Neutral blue
#144C80
color-neutral-blue
Botoes
Icons
arrow-up
arrow-right
arrow-down
arrow-left
thin-arrow-up
thin-arrow-right
thin-arrow-down
thin-arrow-left
chevron-up
chevron-right
chevron-down
chevron-left
user
calendar
clip
download
download
help
phone
upload
awareness-ribbon
coins
money-bag
page-with-curl
schedule
umbrella
user-info
location
play
microphone
dot
check
x
plus
cube
dollar-sign
alert-sign
Cards
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem
Lorem impsum
Lorem, ipsum, dolor, sit amet, consectetur, adipisicing elit.
CNPJ
Lorem
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit cum animi libero at rem, rerum, recusandae aspernatur consequatur obcaecati aut odit quis eaque iusto omnis.
Lorem
Sliders
Modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Libero mauris id faucibus at aliquet mattis bibendum sed quis. Donec odio sapien adipiscing id viverra dignissim nunc tempus mauris. Tincidunt iaculis turpis ligula quam aliquam, lobortis sed vel. Fringilla ut tempor tempus integer pretium lacus cras. Pretium risus tellus viverra felis aenean.
Ut eu eleifend semper justo, commodo iaculis enim ut. Tincidunt mauris lobortis id sit netus diam. Amet nunc urna, habitasse scelerisque in eu ut dolor. Donec magna sit porttitor vitae amet. Ipsum etiam semper bibendum pharetra. Lobortis vestibulum id ridiculus sagittis, pellentesque morbi mattis felis magna. Nibh egestas facilisis erat sed non..
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Libero mauris id faucibus at aliquet mattis bibendum sed quis. Donec odio sapien adipiscing id viverra dignissim nunc tempus mauris. Tincidunt iaculis turpis ligula quam aliquam, lobortis sed vel. Fringilla ut tempor tempus integer pretium lacus cras. Pretium risus tellus viverra felis aenean.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Libero mauris id faucibus at aliquet mattis bibendum sed quis.
Acordion
Tabela
A tabela é feita a partir de um Web Content, dessa forma, precisa ser renderizada fora de um módulo. Você pode encontrá-la com seus usos de caso clicando aqui.
Abas
As abas são um fragmento, dessa forma, precisam ser renderizadas fora de um módulo. Você pode encontrar seus exemplos clicando aqui.