Colors

These are the colors used throughout the site. Each has been assigned to a variable in the framework/variables.scss file.

Base - Primary

Base - Secondary

Shades of Gray


Typography

These are our basic typographic styles. Make updates in the framework/typography.scss file.

Headings

H1. Neo Sans W1G Medium 72/76

H2. Neo Sans W1G Medium 52/72

H3. Neo Sans W1G Medium 36/22

H4. Neo Sans W1G Regular 20/23

H5. Neo Sans W1G BOLD 20
H6. Neo Sans W1G Regular 16/35

Body Copy

Lead Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Default Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Small Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu. John Doe
Title - Business Name
Location

Images & Captions

This is an RTE image caption.

Lists

  • Aenean condimentum ullamcorper ullamcorper.
    • Suspendisse aliquet felis metus.
    • Suspendisse aliquet felis metus.
  • Aenean condimentum ullamcorper ullamcorper.
    • Suspendisse aliquet felis metus.
    • Suspendisse aliquet felis metus.
  1. Aenean condimentum ullamcorper ullamcorper.
    1. Suspendisse aliquet felis metus.
    2. Suspendisse aliquet felis metus.
  2. Aenean condimentum ullamcorper ullamcorper.
    1. Suspendisse aliquet felis metus.
    2. Suspendisse aliquet felis metus.

Links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget vel tempus [email protected].


Buttons

These are our basic button styles. Make updates in the framework/buttons.scss file.

Global and Default Buttons

Buttons with the classes of .btn or .btn--default will mimic the primary button.

Primary and Outlined Styles

Buttons with the btn--primary and .btn--outline classes will now display as shown.

Button Colors

Buttons with the .btn--blue class now display as default/primary buttons. Buttons with .btn--red classes now display as secondary/outlined buttons. White buttons are now the outlined style, too. Finally, Green will appear using the new style guide palette and updated square corner position with a .btn--green class.

Sizes

Scaling sizes illustrated with the .btn class and corresponding .btn--{xx} class.

Icons

A download icon example as it appears in the primary and outlined buttons.

Arrows

An arrow example as it appears in the primary and outlined buttons, animating on hover.

Loading State

Buttons with loading icons will now appear as shown with primary and outlined stylings and retain the same loading spinner.

Alternate Styles

Previous button styles such as .btn__text--alt, .btn--notched, .btn--link, and .btn--has-underline are now overridden to appear as the simplified primary — or outline, if specified — styles.


Forms

These are our basic form styles. Make updates in the framework/forms.scss file.

This field is required.
https://

Notices

These are our basic notice styles. Make updates in the framework/notices.scss file.

Success. This is a positive notification.

.notice__title wrapper. This is an informational notification.

Warning. This is an error notification.


Tooltips

These are our basic tooltip styles. Make updates in the framework/tooltip.scss file.

Default tooltip

Reverse tooltip

With added data-tooltip-style="reverse" attribute added.


Tables

These are our table styles. Make updates in the framework/tables.scss file.

Col 1 Col 2 Col 3 Col 4
Row 1 / Col 1 Row 1 / Col 2 Row 1 / Col 3 Row 1 / Col 4
Row 2 / Col 1 Row 2 / Col 2 Row 2 / Col 3 Row 2 / Col 4
Row 3 / Col 1 Row 3 / Col 2 Row 3 / Col 3 Row 3 / Col 4
Row 4 / Col 1 Row 4 / Col 2 Row 4 / Col 3 Row 4 / Col 4
Col 1 Col 2 Col 3 Col 4

Tabs

These are our tab styles. Make updates in the framework/tabs.scss file.

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus.

Tab 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus.

Tab 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus.


Page Headers

These are our page header styles. Make updates in the site/page-header.scss file.


Primary (Default)


Secondary


Tertiary


Supplier


Marquees

These are our marquee styles. Make updates in the site/marquee.scss file.



Default



Inverted



Archive Landing Page



Article Detail Page



Event Detail Page

Without image
With image


Resource Detail Page


Accordions

These are our accordion styles. Make updates in the framework/accordions.scss file.

Lorem ipsum dolor sit amet consect adipiscing?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac dolor ut massa blandit iaculis. Fusce lectus magna, lobortis in luctus vitae, efficitur a leo. Pellentesque elementum, ante in maximus aliquet, dui mauris porta elit, eu faucibus libero felis non elit.

Lorem ipsum dolor sit amet consect adipiscing?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac dolor ut massa blandit iaculis. Fusce lectus magna, lobortis in luctus vitae, efficitur a leo. Pellentesque elementum, ante in maximus aliquet, dui mauris porta elit, eu faucibus libero felis non elit.

Lorem ipsum dolor sit amet consect adipiscing?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac dolor ut massa blandit iaculis. Fusce lectus magna, lobortis in luctus vitae, efficitur a leo. Pellentesque elementum, ante in maximus aliquet, dui mauris porta elit, eu faucibus libero felis non elit.


Testimonials

These are our testimonial styles. Make updates in the site/testimonials.scss file.


Load More

This is the load more button used to load additional content that appears in the various archives and lists across the site. Make updates in the site/load-more.scss file.


Cards

This is the load more button used to load additional content that appears in the various archives and lists across the site. Make updates in the site/load-more.scss file.


General Cards


Asset Cards


Event Cards


Press Contact Card


Propane Use Cards


Staff Cards

Jonathan Doewater

Position Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit soluta, assumenda deleniti illum architecto iure non cum ipsum maxime error modi at cupiditate consectetur culpa ipsam est quae ducimus omnis?

Contact me for:

  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor

Jonathan Doewater

Position Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit soluta, assumenda deleniti illum architecto iure non cum ipsum maxime error modi at cupiditate consectetur culpa ipsam est quae ducimus omnis?

Contact me for:

  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor

Jonathan Doewater

Position Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit soluta, assumenda deleniti illum architecto iure non cum ipsum maxime error modi at cupiditate consectetur culpa ipsam est quae ducimus omnis?

Contact me for:

  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor

Product Cards


Resource Cards

Variant - Horizontal


Account Cards


Feature Cards

Better Savings

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Reliable Comfort

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Deluxe Appliances

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Sustainable Living

Lorem ipsum dolor sit amet consectetur, adipisicing elit.


Tool Cards


Callouts

These are our various callout styles. Each callout component stylesheet uses the "callout-" prefix and can be found in the site scss directory.


Basic Callouts


Sign-up Callouts


Shop Propane Product Callouts


Video Callouts

Video Callout

Play Video

Promo Callouts


Callout Cards


Shop Propane Product Callouts


Map Callout


Podcast Callout

Podcast Jan 01 2021
Podcast Title

Search Callout


Manufacturers - List


Manufacturers - Logos


Media List

This is the media list component. Make updates in the site/media-list.scss file.

H4 Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor.
Call to Action
H4 Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor.
Call to Action
H4 Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor.
Call to Action

Routing List

This is the routing list component. Make updates in the site/routing-list.scss file.

Post Type 5/19/20 Author Name
Lorem Ipsum
View
Post Type 5/19/20 Author Name
Lorem Ipsum
View
Post Type 5/19/20 Author Name
Lorem Ipsum
View




Authors

This is our authors component. Make updates in the site/authors.scss file.

Contact the Author Need further help?
Contact Us.

Jane Herschmeier

Position Title
Contact

Jonathan Doewater

Position Title
Contact

Video Modal

This is our video modal component. Click the button below to trigger the video modal. Make updates in the site/video-modal.scss file.

Play Video

Icons

All icons used on the site are part of a custom icon font created with IcoMoon.

Original font set



caret-up



caret-right



caret-down



caret-left



arrow-up



arrow-right



arrow-down



arrow-left



external-link



chevron-up



chevron-right



chevron-down



chevron-left



error



info



success



share



email



camera



image



video



play



checkmark



location



lock



add-to-favorites



customize



thumbs-up



thumbs-down



to-top



download

Added/replaced in 2021 re-skin



search



profile



where-to-buy



cart



facebook



instagram



linkedin



twitter



youtube



caret-circle-down



info-i



warning