Style Guide

Color Palette

Gradients

Heroes

Blue Gradient Hero

The subtitle of the blue gradient hero

Pink Gradient Hero

The subtitle of the pink gradient hero, which is considerably longer than the subtitle of the blue gradient hero, to demonstrate how text might wrap at smaller screen sizes

Pink Gradient Hero

The subtitle of the pink gradient hero, which is considerably longer than the subtitle of the blue gradient hero, to demonstrate how text might wrap at smaller screen sizes

Generic Placeholder Image

Typography Styles

Headings

.h1

.h2

.h3

.h4

.h5

.h6

Body Copy

.body-lg

.body-base/.wysiwyg-conent p

.body-sm

Wysiwyg Content

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat. Tellus sed et maecenas at dolor viverra feugiat id. Velit, duis in tincidunt in blandit facilisi. Erat nibh tellus sit sed eu, mi faucibus lectus. In ultrices sagittis, ultrices dictum elit non blandit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat. Tellus sed et maecenas at dolor viverra feugiat id. Velit, duis in tincidunt in blandit facilisi. Erat nibh tellus sit sed eu, mi faucibus lectus. In ultrices sagittis, ultrices dictum elit non blandit.

Headings

Header 1 h1

Header 2 h2

Header 3 h3

Header 4 h4

Header 5 h5
Header 6 h6

Image

random image
.wp-block-image > figcaption

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat. Tellus sed et maecenas at dolor viverra feugiat id. Velit, duis in tincidunt in blandit facilisi. Erat nibh tellus sit sed eu, mi faucibus lectus. In ultrices sagittis, ultrices dictum elit non blandit.

Someone famous in Source Title

Unordered List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

oEmbeds

I am a video caption

Buttons

Tables

Table Header Table Header 2
Table Table 2
Foo Bar
Table Caption

Link Set

Flexible Callouts

Callout Block 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat.

Generic Placeholder Image

Callout Block 2

Tellus, mattis magnis quis erat eu, feugiat.

Generic Placeholder Image

Accordions

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat

Media Set

Custom OMSI Blocks

Image on Right

Two Up Banner

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat.
Generic Placeholder Image

Image on Left

Two Up Banner

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat.
Generic Placeholder Image

Simple Card Table

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Title

Subtitle Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Title

Subtitle Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Title

Subtitle Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Title

Subtitle Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Title

Subtitle Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Title

Subtitle Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Generic Placeholder Image

Image Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat.
Generic Placeholder Image

Image Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat.

Featured Content Grid (Standard)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat.
Generic Placeholder Image

Style Guide

Read More

Style Guide

Read More

Style Guide

Read More

Style Guide

Read More

Style Guide

Read More

Style Guide

Read More

Featured Content Grid (Color Block)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat.

Checked List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus, mattis magnis quis erat eu, feugiat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.