Colors


  • Primary Color
  • Primary Color - Light
  • Primary Color - Dark
  • Secondary Color
  • Secondary Color - Light
  • Secondary Color - Dark
  • Tertiary Color
  • Tertiary Color - Light
  • Tertiary Color - Dark
  • White
  • Light Color
  • Medium Color
  • Dark Color
  • Black
  • Action Color
  • Base Background Color
  • Secondary Background Color
  • Alert Color
  • Error Color
  • Notice Color
  • Success Color

Typefaces


  • Primary Font (body) - Asap
  • Secondary Font (heading) - BioRhyme

Headers


Header 1 small text header 1 small text with markHeader 1 text with mark

Header 2 small text header 2 small text with markHeader 2 text with mark

Header 3 small text header 3 small text with markHeader 3 text with mark

Header 4 small textHeader 4 text with mark

Header 5 small textHeader 5 text with mark
Header 6 small textHeader 6 text with mark

Body Text


Large paragraph body text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Blockquote. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere molestias nesciunt, obcaecati officia. - Lorem Ipsum

I'm a link, you can click me

Card Styles


Basic Card

The entire contents of this card ARE NOT clickable. Only the CTA button. Note: it shares the same styles as the clickable card, only the markup differs with the CTA being wrapped in an <a> tag.

Basic Card

The entire contents of this card ARE NOT clickable. Only the CTA button. Note: it shares the same styles as the clickable card, only the markup differs with the CTA being wrapped in an <a> tag.

Basic Card

The entire contents of this card ARE NOT clickable. Only the CTA button. Note: it shares the same styles as the clickable card, only the markup differs with the CTA being wrapped in an <a> tag.

Icon Card

The entire contents of this card ARE clickable. Note: it shares the same styles as the basic card, only the markup differs with the containing element being wrapped in an <a> tag.

Icon Card

The entire contents of this card ARE clickable. Note: it shares the same styles as the basic card, only the markup differs with the containing element being wrapped in an <a> tag.

Icon Card

The entire contents of this card ARE clickable. Note: it shares the same styles as the basic card, only the markup differs with the containing element being wrapped in an <a> tag.

Card w/ Image

The entire contents of this card ARE clickable. Note: it shares the same styles as the basic card, only the markup differs with the containing element being wrapped in an <a> tag.

Card w/ Image

The entire contents of this card ARE clickable. Note: it shares the same styles as the basic card, only the markup differs with the containing element being wrapped in an <a> tag.

Card w/ Image

The entire contents of this card ARE clickable. Note: it shares the same styles as the basic card, only the markup differs with the containing element being wrapped in an <a> tag.

Unordered List


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ordered List


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit
  5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Buttons


Default (Primary) Secondary Tertiary

Gravity Form


Native Form Elements


Tables


Years President Vice President
2017 - Present Donald Trump Mike Pence
2009 - 2018 Barack Obama Joe Biden
2001 - 2009 George W. Bush Richard Cheney
1993 - 2001 Bill Clinton Albert Gore

Accordions


Something
About something ipsum dolor sit amet consectetur adipiscing elit pellentesque. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst. Volutpat lacus laoreet non curabitur gravida.
Something Else
about something else ipsum dolor sit amet consectetur adipiscing elit pellentesque. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst. Volutpat lacus laoreet non curabitur gravida.
Something Different
about different ipsum dolor sit amet consectetur adipiscing elit pellentesque. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst. Volutpat lacus laoreet non curabitur gravida.

Anything
About anything ipsum dolor sit amet consectetur adipiscing elit pellentesque. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst. Volutpat lacus laoreet non curabitur gravida.
Anything Else
About anything else ipsum dolor sit amet consectetur adipiscing elit pellentesque. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst. Volutpat lacus laoreet non curabitur gravida.
Anything Different
About anything different ipsum dolor sit amet consectetur adipiscing elit pellentesque. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst. Volutpat lacus laoreet non curabitur gravida.

Callout Shortcodes

examples here...

Column Shortcodes

examples here...

Dark Theme

examples here...