Modal trigger button example

Modal example (hidden in code)

Style Guide

E-Switch Colors

.color-primary-color .bgcolor-primary-color
.color-secondary-color .bgcolor-secondary-color
.color-red .bgcolor-red
.color-white .bgcolor-white
.color-black .bgcolor-black
.color-navy .bgcolor-navy
.color-gray-dark .bgcolor-gray-dark
.color-gray-medium .bgcolor-gray-medium
.color-gray-light .bgcolor-gray-light
.color-gray-lighter .bgcolor-gray-lighter
.color-gray-screen .bgcolor-gray-screen
.color-red-dark .bgcolor-red-dark
.color-navy-dark .bgcolor-navy-dark

This is the home page (front-page.php) template. Style your components below for the theme.
Once finished, feel free to move this markup somewhere else in the theme file structure for future reference.

Heading 1, .h1 - 56px

Heading 2, .h2 - 44px

Heading 3, .h3 - 30px

Heading 4, .h4 - 22px

Heading 5, .h5 - 18px
Heading 6, .h6 - 16px

h1.display1 - 90px

h1.display2 - 72px

h3.display3 - 44px

h3.display4 - 28px

.large - 22px

regular P - 18px

.small - 16px

.smaller - 14px

This is a sample paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sample Link

This is a sample paragraph with a link inside of it.

a.btn.small

a.btn.full.primary

(primary just for color, works for any button class)

a .btn

a.btn.primary

a.btn.secondary

a.btn.ghost

hr.divider:

Sample Details

Details content goes here.

Sample Details

Details content goes here.

Sample Details

Details content goes here.

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

Section with .bg-gray class

We often alternate <section> elements background colors with .bg-gray

  • .split Unordered List Item 1
  • .split Unordered List Item 2
  • .split Unordered List Item 3
  • .split Unordered List Item 4

.slim-content

Use the .slim-content class on a container or <div> to improve readability on wider viewports.

Applies max-width and equal horizontal margins.

Fusce non fermentum mi. Praesent vel lobortis elit. Nulla sodales, risus quis sollicitudin iaculis, felis dolor aliquet purus, eget elementum velit nunc eu dolor. Curabitur elit tellus, dictum non sem sit amet, viverra lobortis velit. Quisque facilisis, neque cursus ullamcorper ornare, dolor metus aliquam lacus, pharetra porttitor massa neque ut ligula. Vivamus laoreet nulla diam, eget adipiscing felis scelerisque sit amet. Mauris egestas, nisi vitae cursus tincidunt, urna ipsum facilisis eros, ut venenatis dui tellus sit amet orci. Nullam a rhoncus diam, eget tristique felis. Nulla egestas adipiscing fermentum. Aenean sagittis libero at eros ornare molestie. Morbi convallis ornare imperdiet. Mauris convallis tristique erat ac eleifend.

.lazy-background section

Use the .lazy-background class on an element to delay loading the background image until the user has scrolled closer to the element.

Place the image URL inside the data-bgimage property on the element and JavaScript will take care of the rest via the IntersectionObserver.

See the setupLazyLoadBackgrounds() function in scripts.js and /scss/base/lazyloader.scss for more

Blank Section

WYSIWYG content:

WYSIWYG Content