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

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

Headings

H1. Neo Sans W1G Medium

H2. Neo Sans W1G Medium

H3. Neo Sans W1G Medium

H4. Neo Sans W1G Regular

H5. Neo Sans W1G BOLD

H6. Neo Sans W1G Regular

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

Lists

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.

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

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

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

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

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

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

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.

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

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.

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.

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

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

This is the product gallery. Make updates in the site/gallery-product.scss file..

This is the explore gallery. Make updates in the site/gallery-explore.scss file.

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

[email protected] Contact

Jonathan Doewater

Position Title

[email protected] Contact

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

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

Original font set

Added/replaced in 2021 re-skin