CORE STRUCTURE
page wrapper
Wraps the entire page. Helps copying and pasting the entire page somewhere else.
main wrapper
Wraps the sections. Has <main> html tag.
CONTAINER-large
Centers content on the page and maintain unified max-width values across the project.
max-width-medium
Use it to set inner containers to a max-width.
padding global
Controls horizontal padding globally.
padding section large
Controls vertical padding globally.
padding section Xlarge
Controls vertical padding globally.
HEadings hTML Tags
Hero
HEADING 1
This is styled like Hero
Heading 1
heading 1 / header 1
If you want to use the Header 1 instead of Hero, apply the CSS class Header 1
Heading 2
HEADING 2
Heading 3
HEADING 3
Heading 4
HEADING 4
Heading 5
HEADING 5
Heading 6
HEADING 6
TEXT ALignments
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text align left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text align center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text align right
TEXT WEIGHT
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.
text weight bold
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.
text weight regular
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.
text weight extra light
TEXT color
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text color black
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text color grey 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text color grey 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text color white
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text color dark orange
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text color burnt orange
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text color dark NOLA TEAL
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text color ERROR
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text color warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
text color warning
background color
bG-color-dark-popeyes-orange
bG-color-popeyes-orange
bG-color-dark-NOla-teal
BG-COLOR-nola-teal
bg-color-fresh-white
bg-color-white
bg-color-nola-light
bG-color-grey-3
BG-COLOR-black-opacity-4
BG-COLOR-white-opacity-4
bg-color-error
bg-color-warning
bg-color-success
bg-color-info
SPACING BLOCKS
SPACER 1
SPACER 2
SPACER 3
SPACER 4
SPACER 5
SPACER 6
SPACER 7
SPACER 8
SPACER 9
SPACER 10
SPACER 12
SPACER 16
SPACER 20
SPACER 24
SPACER 32
SPACER 40
SPACER 48
SPACER 56
SPACER 64
SPACER 72
SPACER 80
SPACER 96
