The most common typography block you'll use to create any single line or group of sentences.

Headings (This is a H2)

Make sure to never use the /heading component to add the H1 element to the page. Those are reserved for the page title.

Start each new section with the Heading 2 (h2) component. Never skip a heading level, this will cause accessibility audit issues. With the use of headings, it's like any use proper use of headings in a research document. When you start a new topic, return to the H2 element. When you have sub-topics, start with the H3 and work your way down. Again, never skip (e.g. H2 followed by a H4).

Heading 3 – use, if you have a sub these after the H2

Use, if you have a sub-topic after using the H2 element.

Heading 4

Use, if you have a sub-topic after using the H3 element.

Heading 5

Use, if you have a sub-topic after using the H4 element.

Heading 6

Use, if you have a sub-topic after using the H5 element.


Unordered and Ordered lists are created when selecting the /list block component.

Unordered Lists

  • Item
  • Item

Ordered Lists

  1. item
  2. item
    1. indent leve 1
    2. indent leve 1
      1. indent level 2 (i)
      2. indent level 2 (ii)
        1. indent level 3 (a.)
        2. indent level 3 (b.)
  3. item
  4. item
  5. item
  1. Item when you need to start counting from a number other than 1
  2. Item
  3. Item

Description Lists

Create a new block area and the find the Description Lists block using /description list. The Description Lists (DL element) are used to have a list that needs a Topic (DT element) and a Description (DD element) associated with the topic. The DT will be bold and the description will display like a regular paragraph. In each Description Sets, you are are given a single Topics and Descriptions field. You can then add as many new sets as you wish. While each set can contain multiple topics and descriptions, it's best to keep each set to one topic and one description

First Topic or Event

Description of the first topic or event.

Second Topic or Event

Description of the second topic or event.

Third Topic or Event

Description of the third topic or event.


Accordions can be used to help pages with large amount of content to hide the content until the user wants or needs to see the content. Each /accordion block should be created separately and not nested, for better accessibility and usability. If you hide multiple levels of content in a single accordion, it can be difficult for users to find the content they need quickly.

Separation Lines

Separator lines and dots (like the one below this paragraph) can also be added using the /separator block.


When using the Blockquote component, try to avoid large amounts of text (especially when using the default style). The Blockquote does require a citation of the person you are quoting. Visually, it adds lines above and below the quote.

This is an example of the /quote block in the Default style. Use it for short quotes.

Jane Doe

This is an example of the /quote block using the Large style. Use this when you have a longer quote, since the text is smaller than the default.

John Doe

Special Typography Components


Introduction paragraph that makes text large at the beginning of a page or section

The Section Header Component

When using the Section Header component, it's recommended to add text for both the Section Header Title and Section Header Text. While you can only use the component for the Section Header Title, do not use this component for only the Section Header Text — use the Introduction Paragraph component instead.

Section Header Title

Section header text.

Link List Item

Use the Link List Item component to design a list of links that can be more visually appealing that using the List component. It's best to use this link in conjunction with the Columns component, when you have two or more List Item Links next to each other. Link List Items can link to:

  • an internal page,
  • a file,
  • or external site.
Link Title for a Page


Currently, you can link to both internal and external pages by using buttons.

Buttons on a dark background

The Primary button does not have a fill color, so the background color shows through. If the background is set to black, the color changes to white.

Group Link Components

Group links are useful when you need two or more links next to each other.

Jump To Links

Use the jump to links at the beginning of a page for in-page navigation. Set Anchor (ID) names on a Group element or Heading element. It's best to keep this list to only four links, if possible.

Button Set

Use buttons to link to pages to a URL (external site or a document). Note: It's best. to only use 2 buttons for a set, as a third could move to the line under the first two


If you're not using WPDataTables, you can use the Table component. However, use only the Stripes style

Header Label Column 1Header Label Column 2Header Label Column 3
Row 1 Data for Column 1Row 1 Data for Column 2Row 1 Data for Column 3
Row 2 Data for Column 1Row 2 Data for Column 2Row 2 Data for Column 3
Row 3 Data for Column 1Row 3 Data for Column 2Row 3 Data for Column 3