Style Guide

This is the “introduction” text field. It displays with slightly larger text than the “explore”, “conclude” or any other text field. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid sequatur, quid repugnet, vident. Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. Multoque hoc melius nos veriusque quam Stoici.

CSS Classes

These CSS classes can be used either in the WYSIWYG editor or the panes in the customize display area. Before creating any new classes please be sure to also go over the Bootstrap framework functionality.

Background color helper classes

Gray Darker Background. CSS Class: .gray-darker-bk

Gray Dark Background. CSS Class: .gray-dark-bk

Gray Background. CSS Class: .gray-bk

Gray Light Background. CSS Class: .gray-light-bk

Gray Lighter Background. CSS Class: .gray-lighter-bk

Moorings Primary Background. CSS Class: .moorings-primary-bk

Moorings Heading Background. CSS Class: .moorings-headings-bk

Moorings Heading Dark Background. CSS Class: .moorings-headings-dark-bk

Moorings Sub-Heading Background. CSS Class: .moorings-sub-headings-bk

Moorings Default Background. CSS Class: .moorings-backgrounds-bk

Default Text Color Background. CSS Class: .text-color-bk

Brand CTA Background. CSS Class: .brand-cta-bk

White Background. CSS Class: .color-white-bk

Link Color Background. CSS Class: .link-color-bk

Link Hover Color Background. CSS Class: .link-hover-color-bk

Text color helper classes

Gray Darker Text Color. CSS Class: .gray-darker-color

Gray Dark Text Color. CSS Class: .gray-dark-color

Gray Text Color. CSS Class: .gray-color

Gray Light Text Color. CSS Class: .gray-light-color

Gray Lighter Text Color. CSS Class: .gray-lighter-color

Moorings Primary Text Color. CSS Class: .moorings-primary-color

Moorings Heading Text Color. CSS Class: .moorings-heading-color

Moorings Heading Dark Text CSS Class: .moorings-heading-dark-color

Moorings Sub-Heading Text Color. CSS Class: .moorings-sub-heading-color

Moorings Default Background Text Color. CSS Class: .moorings-backgrounds-color

Default Text Color. CSS Class: .text-color-color

Brand CTA Text Color. CSS Class: .brand-cta-color

White Text Color. CSS Class: .color-white-color

Link Text Color. CSS Class: .link-color-color

Link Text Color. CSS Class: .link-hover-color-color

Typography helper classes

Sans Serif Font. CSS Class: .font-family-sans-serif

Serif Font. CSS Class: .font-family-serif

Left align text. CSS Class: .text-align-left

Center align text. CSS Class: .text-align-center

Right align text. CSS Class: .text-align-right

Spacing helper classes

Used throughout layout to add space between page components: .layout-row
Removes all margins: .no-margin
Removes margin top: .no-margin-top
Removes margin bottom: .no-margin-bottom
Removes margin left: .no-margin-left
Removes margin right: .no-margin-right
Adds 2rem margin to top/bottom: .margin
Adds 2rem top margin: .margin-top
Adds 2rem bottom margin: .margin-bottom
Removes all padding: .no-padding
Removes top padding: .no-padding-top
Removes bottom padding: .no-padding-bottom
Removes padding left: .no-padding-left
Removes padding right: .no-padding-right
Adds 2rem padding top/bottom: .padding
Adds 2rem top padding: .padding-top
Adds 2rem bottom padding: .padding-bottom