Style Guide Text

Standard Text – Core paragraph blocks

Paragraph. Text wrapped into a paragraph tag. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Strong text test. Aenean nunc. Aenean nulla tortor, egestas eget, faucibus quis, sagittis sit amet, sapien. Nulla fringilla. Fusce non erat volutpat lorem fermentum facilisis. Sed velit. Cras posuere justo non elit. Morbi tristique rhoncus est. Aliquam erat volutpat.
Strong text with a link test.
Maecenas dignissim velit ac lectus vulputate tristique. Nam cursus risus in libero. Cras dapibus tortor sed lacus. Aenean interdum tortor et velit. Integer in est quis arcu bibendum porttitor. Vivamus nec felis eget eros posuere porta.
Link test.

Standard Text – HTML tags with no classes

Paragraph. Text wrapped into a paragraph tag. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Strong text test. Aenean nunc. Aenean nulla tortor, egestas eget, faucibus quis, sagittis sit amet, sapien. Nulla fringilla. Fusce non erat volutpat lorem fermentum facilisis. Sed velit. Cras posuere justo non elit. Morbi tristique rhoncus est. Aliquam erat volutpat.
Strong text with a link test.
Maecenas dignissim velit ac lectus vulputate tristique. Nam cursus risus in libero. Cras dapibus tortor sed lacus. Aenean interdum tortor et velit. Integer in est quis arcu bibendum porttitor. Vivamus nec felis eget eros posuere porta.
Link test.

Blockquotes – Core quote blocks

Blockquote tag only test. Cras dapibus tortor sed lacus. Aenean interdum tortor et velit. Integer in est quis arcu bibendum porttitor. Vivamus nec felis eget eros posuere porta.

Blockquote with paragraphs inside test. Cras dapibus tortor sed lacus. Aenean interdum tortor et velit.

Integer in est quis arcu bibendum porttitor. Vivamus nec felis eget eros posuere porta.

Blockquote with paragraphs, and cite inside test.

It was a bright cold day in April, and the clocks were striking thirteen.

First sentence in Nineteen Eighty-Four by George Orwell (Part 1, Chapter 1).

Blockquotes – HTML tags with no classes

Blockquote tag only test. Cras dapibus tortor sed lacus. Aenean interdum tortor et velit. Integer in est quis arcu bibendum porttitor. Vivamus nec felis eget eros posuere porta.

Blockquote with paragraphs inside test. Cras dapibus tortor sed lacus. Aenean interdum tortor et velit.

Integer in est quis arcu bibendum porttitor. Vivamus nec felis eget eros posuere porta.

Blockquote with paragraphs, and cite inside test.

It was a bright cold day in April, and the clocks were striking thirteen.

First sentence in Nineteen Eighty-Four by George Orwell (Part 1, Chapter 1).

Acronym/abbreviation test. Cras dapibus tortor sed lacus. Aenean interdum tortor et velit.

Headings – Core heading blocks

Heading1- Generally in use only as a page title

Paragraph Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading2 – Main content heading

Paragraph Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading3 – Third level heading

Paragraph Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading4 – Fourth level heading

Vivamus eu mauris in sem aliquam elementum. Maecenas varius laoreet ligula. Sed purus tortor, hendrerit at, pellentesque vel, lacinia sed, ante. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vel ligula. Nam pretium bibendum mi.

Heading5 – Fifth level heading

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading6 – Sixth level heading

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Headings – HTML tags with no classes

Heading1- Generally in use only as a page title

Paragraph Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading2 – Main content heading

Paragraph Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading3 – Third level heading

Paragraph Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading4 – Fourth level heading

Vivamus eu mauris in sem aliquam elementum. Maecenas varius laoreet ligula. Sed purus tortor, hendrerit at, pellentesque vel, lacinia sed, ante. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vel ligula. Nam pretium bibendum mi.

Heading5 – Fifth level heading

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading6 – Sixth level heading

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading Sizes

For proper site accessibility and better search performance the headings must always appear in the logical order. However, at times a size of the proper heading may be too big. The following custom classes have been created to allow to override the size of headings.

Heading 2: “Level 1 Size” style modification

Heading 2: “Level 2 Size” style modification

Heading 2: “Level 3 Size” style modification

Heading 3: “Level 1 Size” style modification

Heading 3: “Level 2 Size” style modification

Heading 3: “Level 3 Size” style modification

Heading 4: “Level 1 Size” style modification

Heading 4: “Level 2 Size” style modification

Heading 4: “Level 3 Size” style modification

Heading 5: “Level 1 Size” style modification
Heading 5: “Level 2 Size” style modification
Heading 5: “Level 3 Size” style modification
Heading 6: “Level 1 Size” style modification
Heading 6: “Level 2 Size” style modification
Heading 6: “Level 3 Size” style modification

Heading Color Options (set through Gutenberg typography settings on core paragraph block)

Heading 2: Black (default) (use only on white or light grey background)

Heading 2: Dark Grey (use only on white or light grey background)

Heading 2: Grey (use only on white background)

Heading 2: Light Grey (use only on black background)

Heading 2: White (use only on black or dark background)

Heading 2: Offwhite (use only on white or grey background)

Heading 2: Navy (use only on white background)

Heading 2: Orange (use only on white or grey background)

Heading 2: Pink (use only on black background)

Heading 2: Readable Pink (use only on black background)

Heading 2: Dark Pink (use only on white background)

Heading 2: Teal (use only on black background)

Heading 2: Dark Teal (use only on white background)

Heading 2: Turquoise (use only on black or dark grey background)

Heading 2: Readable Teal (use only on black background)

Paragraph Text Color Options (set through Gutenberg typography settings on core paragraph block)

Paragraph Text: Black (default) (use only on white or light grey background)

Paragraph Text: Dark Grey (use only on white or light grey background)

Paragraph Text: Grey (use only on white background)

Paragraph Text: Light Grey (use only on black background)

Paragraph Text: White (use only on black or dark background)

Paragraph Text: Offwhite (use only on white or grey background)

Paragraph Text: Navy (use only on white background)

Paragraph Text: Orange (use only on white or grey background)

Paragraph Text: Pink (use only on black background)

Paragraph Text: Readable Pink (use only on black background)

Paragraph Text: Dark Pink (use only on white background)

Paragraph Text: Teal (use only on black background)

Paragraph Text: Dark Teal (use only on white background)

Paragraph Text: Turquoise (use only on black or dark grey background)

Paragraph Text: Readable Teal (use only on black background)

Nonstandard Text

This is a block of text entered without any HTML tags around it. It should be rendering in the same font-size and spacing as the text wrapped into a paragraph tag. Fusce non erat volutpat lorem fermentum facilisis. Sed velit. Cras posuere justo non elit. Morbi tristique rhoncus est. Aliquam erat volutpat. Maecenas dignissim velit ac lectus vulputate tristique. Nam cursus risus in libero. Cras dapibus tortor sed lacus.

This is a block of text entered wrapped in a division tag. It should be rendering in the same font-size and spacing as the text wrapped into a paragraph tag. Fusce non erat volutpat lorem fermentum facilisis. Sed velit. Cras posuere justo non elit. Morbi tristique rhoncus est. Aliquam erat volutpat. Maecenas dignissim velit ac lectus vulputate tristique. Nam cursus risus in libero. Cras dapibus tortor sed lacus.

Acronym/abbreviation test. Cras dapibus tortor sed lacus. Aenean interdum tortor et velit.

Ordered list – Core list blocks

  1. Ordered list Aliquam nisl. Sed eros nulla, rhoncus sit amet
  2. sodales sit amet, viverra in, nunc. Nam neque dolor
    1. Nesting Aliquam nisl. Sed eros nulla, rhoncus sit amet
    2. sodales sit amet, viverra in, nunc. Nam neque dolor
    3. rutrum ac, ultrices id, sem. Duis sit amet ligula eu ipsum venenatis fermentum.
    4. Integer rhoncus, diam quis feugiat viverra
  3. rutrum ac, ultrices id, sem. Duis sit amet ligula eu ipsum venenatis fermentum.
  4. Integer rhoncus, diam quis feugiat viverra

Mauris velit lorem, vestibulum nec, facilisis eget, congue ac, tortor. Pellentesque elementum congue lectus. Etiam ac odio non orci auctor aliquam. Donec iaculis augue non tortor. Vivamus mattis suscipit felis. Donec ligula diam, adipiscing ac, condimentum non, porta vitae, magna. Maecenas elit erat, aliquam posuere, viverra eget, tincidunt in, sapien.

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    • Maecenas egestas blandit orci
    • Donec feugiat. Etiam ligula
    • Duis sollicitudin commodo lorem
  • Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Ordered list – HTML tags with no classes

  1. Ordered list Aliquam nisl. Sed eros nulla, rhoncus sit amet
  2. sodales sit amet, viverra in, nunc. Nam neque dolor
    1. Nesting Aliquam nisl. Sed eros nulla, rhoncus sit amet
    2. sodales sit amet, viverra in, nunc. Nam neque dolor
    3. rutrum ac, ultrices id, sem. Duis sit amet ligula eu ipsum venenatis fermentum.
    4. Integer rhoncus, diam quis feugiat viverra
  3. rutrum ac, ultrices id, sem. Duis sit amet ligula eu ipsum venenatis fermentum.
  4. Integer rhoncus, diam quis feugiat viverra

Mauris velit lorem, vestibulum nec, facilisis eget, congue ac, tortor. Pellentesque elementum congue lectus. Etiam ac odio non orci auctor aliquam. Donec iaculis augue non tortor. Vivamus mattis suscipit felis. Donec ligula diam, adipiscing ac, condimentum non, porta vitae, magna. Maecenas elit erat, aliquam posuere, viverra eget, tincidunt in, sapien.

Unordered lists – Core list blocks

  • Unordered list Maecenas egestas blandit orci
    • Unordered list nesting Maecenas egestas blandit orci
    • Donec feugiat. Etiam ligula
    • Duis sollicitudin commodo lorem
  • Donec feugiat. Etiam ligula
  • Duis sollicitudin commodo lorem

Paragraph Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Unordered list – HTML tags with no classes

  • Ordered list Aliquam nisl. Sed eros nulla, rhoncus sit amet
  • sodales sit amet, viverra in, nunc. Nam neque dolor
    • Nesting Aliquam nisl. Sed eros nulla, rhoncus sit amet
    • sodales sit amet, viverra in, nunc. Nam neque dolor
    • rutrum ac, ultrices id, sem. Duis sit amet ligula eu ipsum venenatis fermentum.
    • Integer rhoncus, diam quis feugiat viverra
  • rutrum ac, ultrices id, sem. Duis sit amet ligula eu ipsum venenatis fermentum.
  • Integer rhoncus, diam quis feugiat viverra

Mauris velit lorem, vestibulum nec, facilisis eget, congue ac, tortor. Pellentesque elementum congue lectus. Etiam ac odio non orci auctor aliquam. Donec iaculis augue non tortor. Vivamus mattis suscipit felis. Donec ligula diam, adipiscing ac, condimentum non, porta vitae, magna. Maecenas elit erat, aliquam posuere, viverra eget, tincidunt in, sapien.

List with block style modification: Arrows

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
  • Maecenas egestas blandit orci
  • Donec feugiat. Etiam ligula
  • Duis sollicitudin commodo lorem

List with block style modification: Checkmarks

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Maecenas egestas blandit orci
  • Donec feugiat. Etiam ligula
  • Duis sollicitudin commodo lorem

List with block style modification: Two cols checkmarks

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Maecenas egestas blandit orci
  • Donec feugiat. Etiam ligula
  • Duis sollicitudin commodo lorem

List with chevrons class list

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
  • Maecenas egestas blandit orci
  • Donec feugiat. Etiam ligula
  • Duis sollicitudin commodo lorem

List with checkmarks class list list--checkmark

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Maecenas egestas blandit orci
  • Donec feugiat. Etiam ligula
  • Duis sollicitudin commodo lorem

List auto-wraps into two columns class list list--two-columns

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Maecenas egestas blandit orci
  • Donec feugiat. Etiam ligula
  • Duis sollicitudin commodo lorem