Short display headline – H1

Short display headline – H2

Short display headline – H3

Short display headline – H4

Short display headline – H5
Short display headline – H6

View longer headings (to test text wrapping/line spacing)

Full Heading

Eyebrow Heading

The headings above are actually in reverse order for accessibility. In code, they are ordered H2 + H3, but on display the H3 (eyebrow) appears first. In order to accomplish this, the headings are wrapped in a group with the class reverse-order. This allows the document structure to be read properly by a screen reader with ‘Full Heading’ coming first and ‘Eyebrow Heading’ coming second.

Eyebrow Small

Full Heading

The headings above are in standard order & use the smaller eyebrow style. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Inmensae subtilitatis, obscuris et malesuada fames. Praeterea iter est quasdam res quas ex communi. Etiam habebis sem dicantur magna mollis euismod. Petierunt uti sibi concilium totius Galliae in diem certam indicere.

Eyebrow w/Icon Heading

Full Heading

Icon color in the Icon Heading block style is triggered by the ‘Department’ taxonomy in the page settings. Change the department to HKSB and it changes the icon to yellow. See how this works (setting the outer group to use the department-hksb class will also do the same)

Eyebrow w/Icon Small Heading

Full Heading

Full Heading

Eyebrow w/Icon Small Heading

Paragraph – Regular

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Inmensae subtilitatis, obscuris et malesuada fames. Praeterea iter est quasdam res quas ex communi. Etiam habebis sem dicantur magna mollis euismod. Petierunt uti sibi concilium totius Galliae in diem certam indicere.

Paragraph – Small

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Inmensae subtilitatis, obscuris et malesuada fames. Praeterea iter est quasdam res quas ex communi. Etiam habebis sem dicantur magna mollis euismod. Petierunt uti sibi concilium totius Galliae in diem certam indicere.

Blockquote – Regular

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt.

Second Paragraph Example for testing. Lorem ipsum dolor sit amet.

Citation Here

Blockquote – Small

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Inmensae subtilitatis, obscuris et malesuada fames. Praeterea iter est quasdam res quas ex communi. Etiam habebis sem dicantur magna mollis euismod. Petierunt uti sibi concilium totius Galliae in diem certam indicere.

Citation Here

List – Green Checklist

  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
  • Ceteris in veneratione tui montes, nascetur mus.
  • A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod.

Same w/Background

  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
  • Ceteris in veneratione tui montes, nascetur mus.
  • A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod.

List – Circled Check

  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
  • Ceteris in veneratione tui montes, nascetur mus.
  • A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod.

Like the headings, the color of this element is determined by the ‘Department’ taxonomy in the page settings. Change the department to HKSB and it changes the icon to yellow. See how this works (setting the outer group to use the department-hksb class will also do the same)

Same w/Background

  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
  • Ceteris in veneratione tui montes, nascetur mus.
  • A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod.

List – Large Checkbox

  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
  • Ceteris in veneratione tui montes, nascetur mus.
  • A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod.

Like the headings, the color of this element is determined by the ‘Department’ taxonomy in the page settings. Change the department to HKSB and it changes the icon to yellow. See how this works (setting the outer group to use the department-hksb class will also do the same)

Same w/Background

  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
  • Ceteris in veneratione tui montes, nascetur mus.
  • A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod.

Default Unordered List

  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
  • Ceteris in veneratione tui montes, nascetur mus.
  • A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod.
    • Lorem ipsum dolor sit amet, consectetur
    • Sed eiusmod tempor incidunt ut labore et

Default Ordered List

  1. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
  2. Ceteris in veneratione tui montes, nascetur mus.
  3. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod.
    1. Lorem ipsum dolor sit amet, consectetur
    2. Sed eiusmod tempor incidunt ut labore et

Buttons

On groups/columns with a background color, buttons without a colored background (‘Outlined’ & ‘Link’ styles) inside will inherit the text color of the parent element. See the right column below for examples.

Core Styles

Examples showing mixed styles for testing

Forms

Using Gravity Forms. The column to the right has the ‘Form Card’ block style applied, but you can also wrap your form in an element with the card-form class to use this outside of a column.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Magna pars studiorum, prodita quaerimus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Quisque ut dolor gravida, placerat libero vel, euismod.

Contact Us

Name(Required)
Consent
Consent(Required)
This field is for validation purposes and should be left unchanged.

Images

Separators

Default (Grey)


Dark (Dark Navy)


Columns with vertical divider. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Idque Caesaris facere voluntate liceret: sese habere. Quam diu etiam furor iste tuus nos eludet?

Columns with vertical divider. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Idque Caesaris facere voluntate liceret: sese habere. Quam diu etiam furor iste tuus nos eludet?

Columns with vertical divider. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Idque Caesaris facere voluntate liceret: sese habere. Quam diu etiam furor iste tuus nos eludet?

Columns with vertical divider, dark variant. To accomplish this, you need to enable both the ‘Dividers’ toggle on the column group, and also apply the CSS class dark-dividers under ‘Advanced’ on the same column group

Columns with vertical divider, dark variant. To accomplish this, you need to enable both the ‘Dividers’ toggle on the column group, and also apply the CSS class dark-dividers under ‘Advanced’ on the same column group

Columns with vertical divider, dark variant. To accomplish this, you need to enable both the ‘Dividers’ toggle on the column group, and also apply the CSS class dark-dividers under ‘Advanced’ on the same column group

Video Embed Pattern

Use this example in any block patterns which include a video. This pattern will manage the correct proportions, caption styles, play button chrome, and UX actions to load the modal on click. The video should be linked via the image URL, and the caption should use the native image caption. (Select the group at right with the class video-modal to copy this pattern to your own patterns)

Native Video Embed

This block should generally never be used as seen here. This is the native WP video block, which is problematic for our usage, as we cannot control the YouTube/Vimeo UX. It’s styled here just in case, but please use the correct block pattern example as shown above.

Play Video: Introduction to Helen Keller National Center for DeafBlind