WordPress pages and posts are comprised of ‘blocks'; the simplest being a paragraph of text, which in fact takes the shape of a rectangle in the web browser. Web authors insert these blocks in the WordPress Editor, thus “building” web pages out of a series of elemental components not unlike the construction of lego block structure. Below are the simplest ones.


Heading – H1

Heading – H2

Heading – H3

Heading – H4

Heading – H5
Heading – H6

H1s are reserved for the page title only. Do not bold headings. Use italics sparingly. Headings are critical elements for search engine optimization.

This is a sample paragraph of text. It is the most used block by far and, in fact, serves as the default block insertion in the WordPress Editor. Here is some sample italic text. Here is some bold text. This is a sample inline link here. You can use subscripts1 and superscripts2. You can have strikethrough text if needed. Here's highlighted text using red and white coloring. Paragraphs can be aligned left, right, or center.

Should there be a need to show readers a block of formatted text, choose between the ‘code', ‘preformatted', and ‘verse' blocks. They look like this:

<script>
  // This is the 'code' block
  foobar = 'Hello, world!';
  alert(foobar);
</script>
This is the pre-formatted text block. It's kind of a cross between paragraphs, code, and verse. It also simplifies them. It displays the text you type, but instead of changing the formatting, it retains it. Try the verse block if you need alignment options, too.

   This includes all spaces and line breaks. 
   It's displayed in a monospace font.

Paragraphs of text are sized at 16px by default. You can override this setting with the typography tool, though you should consult with the web content manager before doing so.

  • This is an unordered list item
  • And another item
  • And a final list item
  1. This is an ordered list item
  2. And another item
  3. And a final list item

Lists have a “Call to Action” style that we use to produce a list of bolded hyperlinks.

Buttons should be used sparingly, as they are typically associated with filtering or actions that change the state of an interface. We allow a few different styles. Please use them consistently.

This is a ‘quote' block with default styling, typography size, and appearance.

Citation Goes Here

“This is a ‘pull quote' block item with default settings for alignment and typography size. Appearance has been set to ‘thin'.”

CITATION GOES HERE

This is the ‘quote' block aligned to the right.

Citation Goes Here

There are two quote blocks available, Quote and Pullquote. The first uses an enlarged quote mark to draw attention; the second uses a gray background.

Table HeaderTable Header
Table contentThis table uses default styling with the optional header and footer sections enabled. Table cells are set to fixed width.
Table contentTable content
Footer labelFooter label
This is the optional table caption.
Table headerTable Header
Table contentThis table uses stripped styling and has removed the footer section. Fixed width cells are turned off.
Table contentTable content
Table contentTable content
Table contentTable content

Tables are designed for tabular data, not layout control. When necessary, use the ‘stacked on mobile' setting to ensure table headers repeat on smaller devices.





Separators help you break a page into sections for better readability. We offer four styles and request consistent use only.

We use the feather icon set. You can control placement of these inline elements by using the group block.