Style Guide

Typography

These styles are set globally in the theme customizer whenever possible.

Font sizes should be set in REM if possible.

Special block styling also displayed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim facilisis sapien in tempus. Vestibulum non sem pellentesque, rutrum libero et, pretium diam.

Sed fringilla dui massa, ac tristique magna porta eu (strickthrough). Sed venenatis orci sit amet sapien ornare ultrices. Etiam enim elit, efficitur in viverra vel, eleifend eu ligula.

Dolor sit amet Neque Sodales ut Etiam sit H2

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam a quam eros (highlight). Sed quis felis at risus tempor pellentesque non at nulla. Sed feugiat ligula placerat, convallis purus et, elementum purus.

Ex tota solet causae quo, has ex virtute inciderint. Eos singulis consequuntur ne, vim no eirmod integre gubergren

Rhoncus Dolor Purus H3

Aliquam dictum sapien eu metus viverra, vel interdum urna interdum. Integer pharetra leo in mauris feugiat convallis. Praesent lobortis sapien dolor, ac posuere tellus cursus quis. Nam id lobortis libero. Nulla mattis augue at suscipit accumsan. Cras luctus sit amet dolor ac consequat. Fusce ornare risus vel magna placerat, vitae consectetur risus aliquam.

Est Sit Amet H4

Aenean volutpat nisl nec urna pharetra dapibus. Ut eget lobortis dolor. Donec pharetra tellus ac leo cursus, in rutrum leo commodo. Morbi iaculis, odio ut finibus pellentesque, lorem tortor fermentum neque, vel sodales ex lectus at est.

Sit Amet Luctus H5

Vivamus faucibus sem nisl, id semper enim rhoncus eget. In fermentum sem ac est commodo interdum. Donec eu ante facilisis arcu malesuada mollis. Fusce laoreet nec justo a malesuada. Sed eget volutpat orci.Mauris blandit tristique eros, non ultricies tortor accumsan ut. Aenean pulvinar suscipit elementum. Fusce vel mollis lacus, in malesuada ante.

  • Cras bibendum bibendum lectus, mattis auctor sem.Tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus.A arcu cursus vitae congue. Nunc mattis enim ut tellus elementum sagittis vitae et leo.
  • Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Seaslk fjsdklf H6

Etiam vel sapien sed est luctus pulvinar nec at massa. Suspendisse rutrum ligula eu odio cursus condimentum. Nullam id velit arcu.

Fusce laoreet nec justo a malesuada. Sed eget volutpat orci.Mauris blandit tristique eros, non ultricies tortor accumsan ut. Aenean pulvinar suscipit elementum. Fusce vel mollis lacus, in malesuada ante.

Code Block with Keyboard Input:

p {
  color: red;
  text-align: center;
}

Aliquam nunc elit, aliquam quis auctor eget, imperdiet ut sapien. Fusce odio tortor, posuere vel mi eu, auctor mollis ligula.

Quote Block by John Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Pullquote Block by Jane Doe

Colors

These colors are are set globally in the theme customizer whenever possible.

Edits to the Global Colors variables settings in the customizer will change all instances of each color on the website.

Coolors palettes are provided for reference but use variable names in the site and css.

contrast
contrast-2
contrast-3
base
base-2
base-3
accent
accent-2
accent-3

Coolors Custom Palette

Coolors Neutrals Palette

Components

These supporting components are available sitewide. Styling of buttons should be done in the Global Styles.

For Icons, copy SVG code from Bootstrap Icons and paste into module’s Icon section.

Icons

Social Icons

Forms

Name(Required)
Email(Required)