Styleguide

Typography Lorem ipsum dolor sit amet, consectetur adipiscing elit Texto comum · 14px/ 24px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Texto em negrito Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. […]

FM.com » Styleguide

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Texto comum · 14px/ 24px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Texto em negrito

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Texto em itálico

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

text-size1 · 16px/ 26px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

text-size2 · 24px/ 34px

Lorem ipsum

text-sizexl · 108px/ 128px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

font-size2 · 22px/ 30px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Citação em bloco

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Sed do eiusmod tempor incididunt ut
  • Labore et dolore magna aliqua

Lista com bullet

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Sed do eiusmod tempor incididunt ut
  4. Labore et dolore magna aliqua

Lista numerada

Headings

Lorem ipsum dolor sit amet, consectetur adipiscing elit

H1 · 42px/ 52px

Lorem ipsum dolor sit amet, consectetur adipiscing elit

H2 · 36px/ 46px

Lorem ipsum dolor sit amet, consectetur adipiscing elit

H3 · 28px/ 38px

Lorem ipsum dolor sit amet, consectetur adipiscing elit

H4 · 20px/ 30px

Backgrounds

bg-c1

#0a2b25

bg-c2

#55807f

bg-c3

#e3f6ff

bg-c4

#d3cec4

bg-g1

#0a2b25

bg-g2

#0a2b25

bg-g3

#0a2b25

bg-g4

#0a2b25

Colors

text-c1

#0a2b25

text-c2

#55807f

text-c3

#e3f6ff

text-c4

#d3cec4

text-g1

#0a2b25

text-g2

#55807f

text-g3

#e3f6ff

text-g4

#d3cec4

Buttons

bttn1

Botão 1

bttn2

Botão 2

bttn-out1

Botão contorno

bttn-small

Botão pequeno

Grids

outside the grid

outside the grid

span-6
span-6

span-6

span-one-third
span-4
span-one-third

span-on-third, span-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
span-one-fourth
span-3
span-one-fourth

same height siblings

This cell should be top-aligned.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This cell should be top-aligned.

top-aligned

This cell should be center-aligned.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This cell should be center-aligned.

centered

This cell should be bottom-aligned.
PeLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This cell should be bottom-aligned.

bottom-aligned

Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Top
Center
Bottom

mixed vertical alignment

span-12
auto
span-one-third
auto
span-one-third

auto sizing

1/3
1/2
1/2
1/3

nested

offset-4
offset-one-third

offsets

Description of image

Tudo começa quando a gente supera o medo de dar o primeiro passo.

Quero dar o primeiro passoInstagram