Styleguide


Typography

H1 Heading (.h1)

H2 Heading (.h2)

H3 Heading (.h3)

H4 Heading (.h4)

H5 Heading (.h5)

H6 Heading (.h6)

  • Unordered List Item 1
  • Unordered List Item 2
    1. Ordered List Sub Item 1
    2. Ordered List Sub Item 2
    3. Ordered List Sub Item 3
  • Unordered List Item 3
    • Unordered List Sub Item 1
    • Unordered List Sub Item 2
    • Unordered List Sub Item 3
  • Unordered List Item 4
  1. Ordered List Item 1
  2. Ordered List Item 2
    • Unordered List Sub Item 1
    • Unordered List Sub Item 2
    • Unordered List Sub Item 3
  3. Ordered List Item 3
    1. Ordered List Sub Item 1
    2. Ordered List Sub Item 2
    3. Ordered List Sub Item 3
  4. Ordered List Item 4

.leading-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

.leading-tighter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

.leading-tight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

.leading-normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

.leading-loose

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

In eget ligula id ex semper consectetur. Proin pulvinar placerat varius. Nunc vel elementum risus. Praesent efficitur maximus ultricies. Quisque lobortis dui ultricies orci aliquet scelerisque. Vivamus sit amet nisi laoreet erat finibus commodo. Duis vitae sapien tincidunt nulla sollicitudin sollicitudin vel fringilla eros. Nullam viverra eros at nisl volutpat, quis rhoncus neque auctor.

This is an example of a blockquote element. It automatically enlarges text, adds padding, and wraps text with quotation marks as :before and :after pseudo-elements.
Proin turpis tellus, vehicula nec ornare sed, accumsan in lacus. Phasellus aliquet, metus non pulvinar porta, nisl lacus sagittis nulla, a pharetra arcu lectus eu nunc. Curabitur imperdiet viverra ultrices. Curabitur augue odio, dignissim non felis sed, faucibus suscipit nisi. Curabitur ullamcorper, enim sed auctor accumsan, ipsum mauris egestas risus, sed tincidunt purus lorem et tortor.

Link Text (.link)
Strong Text (.font-bold)
Italic Text (.italic)

Text xs: ".75rem", 12px

Text sm: ".875rem", 14px

Text base: "1rem", 16px

Text lg: "1.125rem", 18px

Text xl: "1.25rem", 20px

Text "2xl": "1.5rem", 24px

Text "3xl": "1.875rem", 30px

Text "4xl": "2.25rem", 36px

Text "5xl": "3rem", 48px


Buttons

  • All buttons are based off the tailwind.js variables colors.link-color and colors.link-interact.
span.btn a.btn

Colors

Grey
Base #B8C2CC
White #FFFFFF
Lightest #F8FAFC
Lighter #F1F5F8
Light #DAE1E7
Base #B8C2CC
Dark #8795A1
Darker #606F7B
Darkest #3D4852
Black #22292F

Gravity Forms

  • Shows labels and sub-labels by default
  • Add class "hide-labels" in form settings to hide ALL labels.
  • Add class "hide-sub-labels" to hide ONLY sub-labels.

Example:

Contact

  • This field is for validation purposes and should be left unchanged.


Modules

Content 50/50 Header

Content 50/50 content area

5050 Button
Content 5050 Header 2

Content 50/50 content area 2

5050 Button 2

Content Centered Header

Content Centered content area

Center Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est turpis, facilisis condimentum sapien non, posuere vestibulum elit. Praesent et placerat ante, quis viverra nulla. Nam convallis volutpat fringilla. Integer dapibus leo justo, egestas mattis dui molestie sit amet. Nam bibendum pulvinar eros, a malesuada diam consectetur vitae. Donec maximus quam eget laoreet bibendum. Maecenas vel sodales felis. In hac habitasse platea dictumst. Aliquam mattis consequat sapien sit amet fringilla. Mauris varius id turpis sit amet ultrices. Nam nec ultricies orci, at luctus neque. Proin fermentum tempus nunc. Sed eget lectus eget nulla egestas mattis non ac turpis. Duis mattis turpis pharetra, auctor orci nec, ornare erat.

Content Grid Header

Content Grid content area

Logo Grid Header

Logo Grid content area.