StyleGuide

Text Styles

Heading 1

Heading 1 (Small)

Heading 2

Heading 2 (Large)

Heading 3

Heading 3 (Small)

Heading 4

Heading 5
Heading 6

Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Para 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Para 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Para 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button CTAButton PrimaryButton secondary

Animations (Global)

  • Slide up
  • Slide up 200
  • Slide up 400
  • Slide up 600
  • Slide up 800
  • Slide left
  • Slide left 200
  • Slide left 400
  • Slide left 600
  • Slide left 800

Classes (Global)

Margins
.mb10
Margin bottom 10px
.mb20
Margin bottom 20px
.mb30
Margin bottom 30px
.mb40
Margin bottom 40px
.mt10
Margin top 10px
.mt20
Margin top 20px
.mt30
Margin top 30px
.mt40
Margin top 40px
.nomt
no margin top
.nomb
no margin bottom
.mt-auto
margin top auto
.mb-auto
margin bottom auto
text
.capitalize
Capitalize text
.center
Centers text
.semibold
semibold text
MISC
.opacity-6
opacity 60%
.section padding 1
opacity 60%
.section padding 1
opacity 60%