Patterns @ 8px

Sample Elements and Guidelines for Page-building in WordPress

A. Content & Blocks

Default blocks are for basic text and images on a full-width background. These blocks have extra padding at the top and bottom of each block to ensure adequate spacing between blocks of alternating colors. When blocks have the same background color, reduce top and bottom spacing to 24px.

Content – One Column

Optional section introduction.

Subheading

Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu. Magnis blandit donec laoreet maximus quis nulla. Eleifend duis quam non phasellus ullamcorper ex consectetur montes habitant. Netus cubilia tortor libero, pulvinar fermentum nisl scelerisque quis. Natoque potenti enim mus viverra proin etiam suspendisse urna praesent.

Content – Two Column

Optional section introduction.

Subheading

Lorem ipsum dolor sit amet consectetur. Viverra eget condimentum pellentesque at amet et nisi. Tristique pellentesque in aliquam vel. Risus sed sed a tincidunt. In at ut morbi amet feugiat pellentesque hac varius.

Content – Grid

Optional section introduction.

By changing the Column Wrapper's Layout to Grid instead of Flex, you can establish the number of columns and have block automatically wrap into multiple rows.

Lorem ipsum

To add or remove grid items, just select any Grid Item and delete or duplicate as needed.

Lorem ipsum

To add or remove grid items, just select any Grid Item and delete or duplicate as needed.

Lorem ipsum

To add or remove grid items, just select any Grid Item and delete or duplicate as needed.

Content – Two Column

Optional section introduction.

Lorem ipsum dolor

If the image is set as the container background, be sure to set a manual height on mobile when the columns stack.

To change the layout, swap Column 1 and Column 2.

Block – One Column

Optional section introduction.

Subheading

To use this or similar blocks at a narrower width, change the outermost parent container’s Content Box Width to 800px (or whatever the current theme’s Narrow width is — this may vary).

Block – Two Column

Optional section introduction.

Lorem ipsum dolor sit amet consectetur

To change the position of text within a column, select the immediate container (ex. Column 1) > General > Layout> Justify Content > Flex Start. If this does not work, double check that your parent container settings (ex. Block Wrapper) General > Container Type > Equal Height = ON.

Block – Two Column – Image

Optional section introduction.

Two Column Block

Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu.

Block – Two Column – Image Full-Bleed

Optional section introduction.

Lorem ipsum dolor sit amet consectetur

For full-bleed images, set the image as the background of the column container. Be sure to set a manual height on mobile when the columns stack.

Blocks – Grid

Optional section introduction.

Lorem ipsum

To add or remove grid items, just select any Grid Item and delete or duplicate as needed.

Lorem ipsum

To add or remove grid items, just select any Grid Item and delete or duplicate as needed.

Lorem ipsum

To add or remove grid items, just select any Grid Item and delete or duplicate as needed.

Blocks – Full-Bleed

Width of Column Content container is half of the content area minus the padding facing the center of the page.

Set parent container to align items: flex-end.

1200/2 = 600
600 – 72 = 528 (desktop)

Revert to 100% on tablet!

Blocks Full-Bleed

Width of Column Content container is half of the content area minus the padding facing the center of the page.

Set parent container to align items: flex-end.

1200/2 = 600
600 – 72 = 528 (desktop)

Revert to 100% on tablet!

Blocks – Full-Bleed Image Left

For full-bleed images, set the image as the background of the column container. Be sure to set a manual height on mobile when the columns stack.

Blocks – Full-Bleed Image Right

For full-bleed images, set the image as the background of the column container. Be sure to set a manual height on mobile when the columns stack.

D. Narrow Content (Left-Aligned)

Narrow Content – One Column (Left-Aligned)

Optional Introduction

Like other “Narrow” blocks, the content width is limited to 800px, but the copy is aligned to the left to maintain a consistent line of focus for readers. Most often used on robust landing pages with additional wide or full-width elements.

Add Additional Headings and Content Here

Subheading

Narrow Content – Two Columns (Left-Aligned)

Optional Introduction

The text area is still limited to 800px, but the image column uses the negative space.

Subheading

C. Narrow Content & Blocks (Center-Aligned)

Narrow Content – One Column

Optional section introduction.

Add Additional Headings and Content Here

Subheading

Narrow Content – One Column

Optional section introduction.

Subheading

Narrow Content – Two Column

Optional section introduction.

Subheading

Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu.

Narrow Block – One Column

Optional section introduction.

Subheading

Use this element for introductory paragraphs or callout blocks.

Narrow Block – Two Column

Optional section introduction.

Subheading

Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu.

Narrow Content – Two Column Full-Bleed

Optional section introduction.

Subheading

For full-bleed images, set the image as the background of the column container. Be sure to set a manual height on mobile when the columns stack.