Use H1 tags for the top level title of a page. There should usually only be one of these on a web page.

This is a sample heading H1 - XXL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H1 - XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H1 - Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H1 - Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H1 - Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H1 - Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Use H2 tags for section headings within a document.

This is a sample heading H2 - XXL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H2 - XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H2 - Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H2 - Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H2 - Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H2 - Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Click on a widget, select the advanced tab, and then add the following classes to add space between elements. These examples cover margin-top, but you can apply these to other directions (top, right, bottom, left) as well as with padding.

Format: property–direction–size

Options:

property: margin; padding
direction: top; right; bottom; left
size: xxl; xl; l; m-3; m-2; m; s

Some element

margin-top-xxl

margin-top-xl

margin-top-l

margin-top-m-3

margin-top-m-2

margin-top-m

margin-top-s

These classes will help you layout sections and columns and inner-sections. They use a minimum height relative to the viewport. If content is taller than that, it’ll stretch. Important: A column with a background image doesn’t actually have content. On mobile views it will compress down to virtually nothing (its padding) unless you give it a minumum height.

min-height-full: set an object to be the full height of the website minus the stock header nav height. It does not take into account the covid banner, WordPress admin bar, or additional horizontal menus like the employees menu.

min-height-tall: set a container to be tall, resulting in an almost vertical scroll block, with a hint of content below. Sometimes full screen content that hides further content can make pages look empty. 🙁

min-height-short: set a container to be short to ensure that background images of columns don't get vertically compressed down to nothing.

In this example, we set the section to full width content and no column game with the class min-height-tall, the left column to vertically and horizontally align content, and the right column to min-height-short.

Add Your Heading Text Here

Headings have margin above them. You may need to add 'padding-bottom-l' or something similar to the floated inner section's column to even out the top and bottom spacing for correct optical vertical centering.

min-height-short: This column is set to min-height-short, forcing it to be at least a certain height. If the content on the left column is higher (or the section’s min height is higher) it’ll be forced to grow. This is useful for creating a section with min-height-tall, which stacks and has a picture column with min-height-short.

These classes will help you layout columns and blocks/widgets to set grid sizes. They use maximum widths, so they’ll grow to a max, and shrink as required.

width-1-2: set a maximum width to 1/2 of the content column. Useful for floating content in one side of a two column layout section. In this example, the parent section has full width content with no column gap. The column this box is in is set to horizontally align it's content, making the green box float.

width-1-2: set a maximum width to 1/2 of the content column. Useful for floating a narrow column of content in a section.

width-1-3-stretch: Use this on a top level section’s column to split a layout row into a thirds column configuration. Floated content in this colum should likely have the class ‘width-1-3’. Setting the column’s horizontal align to ‘end’ will slick the floated frame to the column gutter, giving you a consistent left content column margin.

width-2-3-stretch: Use this on a top level section’s column to split a layout row into a thirds column configuration. Floated content in this colum should likely have the class ‘width-1-3’. Setting the column’s horizontal align to ‘end’ will slick the floated frame to the column gutter, giving you a consistent left content column margin.

width-1-3: set a maximum width to 1/3 of the content column.

width-2-3: set a maximum width to 2/3 of the content column.

width-full: stretch to the full content width of the site. Useful for placing a floating row in a section.