COVID-19 Message to Propane Customers   Learn More »

Learn More

COVID-19 Message to Propane Customers   Learn More »

Learn More

Colors

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

Base

Gray


Typography

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

Headings

H1. The quick brown fox jumps over the lazy dog.

H2. The quick brown fox jumps over the lazy dog.

H3. The quick brown fox jumps over the lazy dog.

H4. The quick brown fox jumps over the lazy dog.

H5. The quick brown fox jumps over the lazy dog.
H6. The quick brown fox jumps over the lazy dog.

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.

Default Styles

Outlined

Alternate Styles


Forms

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

This field is required.
http://

Notices

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

Success! This is a positive notification.

This is an informational notification.

This is an error notification.


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

Propane


Event Detail Page



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

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 Full-Width Callouts


Sign-up Callouts

Variant - Light

Variant - Full-Width


Promo Callouts


Dark Callout Cards


Shop Propane Product Callouts


Map Callout


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.



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



facebook



instagram



linkedin



twitter



youtube



email



camera



image



video



play



cart



checkmark



location



where-to-buy



lock



profile



add-to-favorites



customize



search



thumbs-up



thumbs-down



to-top



download