Patterns – 10px 40-30-20
Basic Page Title + Subtitle
A. Inline
Inline patterns display text or other elements directly on the page. The background color of the outermost parent can be changed along with the text color on a block-by-block basis!
Inline – 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.
Inline – 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.
Inline – Grid (CTA)
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 longer title as an example
To add or remove grid items, just select any Grid Item and delete or duplicate as needed. Lorem ipsum dolor sit amet; longer to test the layout.
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 dolor sit amet; longer to test the layout.
Inline – Grid (Basic)
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 longer title as an example
To add or remove grid items, just select any Grid Item and delete or duplicate as needed. Lorem ipsum dolor sit amet; longer to test the layout.
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 dolor sit amet; longer to test the layout.
Inline – Two Column
Optional section introduction.
Image Set as Background (Force Equal Height)
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.
Inline – Two Column
Optional section introduction.
Image Inserted as Block (Inherit Height from Image)
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.
B. Boxed
Boxed patterns display text or other elements contained within an additional container, i.e. a callout box.
Boxed – One Column
Optional section introduction.
Lorem ipsum dolor sit amet consectetur
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).
Boxed – 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.
Boxed – Two Column Image
Optional section introduction.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu.
Boxed – Two Column Image – Full-Bleed Right
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.
Boxed – Two Column – Image Full-Bleed Left
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.
Boxed – Grid (Simple)
Optional section introduction
Lorem ipsum longer title as an example
Icons are optional!
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.
Boxed – Grid (CTA)
Optional section introduction
Lorem ipsum longer title as an example
Icons are optional!
Lorem ipsum
Icons are optional!
Lorem ipsum longer title as an example
Icons are optional!
Boxed – Grid (Image)
Optional section introduction.
Lorem ipsum with a longer title
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Lorem ipsum with an even longer title for testing
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.
Boxed – Grid (Label)
Optional section introduction.
Text
Lorem ipsum longer title that wraps
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Text
Lorem ipsum
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Text
Lorem ipsum longer title that wraps
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Boxed – Grid (Label + Image)
Optional section introduction.
Text
Lorem ipsum longer title that wraps
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Text
Lorem ipsum longer title that wraps
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
Text
Lorem ipsum longer title that wraps
To add or remove grid items, just select any Grid Item and delete or duplicate as needed.
C. Full Bleed
Boxed patterns display text or other elements contained within an additional container, i.e. a callout box.
Full-Bleed – Two Column
Width of Column Content container = Content area / 2 – padding left and padding right (ex. 540 px). Set parent container to align items: flex-end.
Blocks Full-Bleed
Width of Column Content container = Content area / 2 – padding left and padding right (ex. 540 px). Set parent container to align items: flex-start.
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.
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
Narrow Inline – One Column Left
Optional 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.
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.
Narrow Inline – Two Column
Optional 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 Inline – 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.
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.
Narrow Inline – 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.
Narrow Inline – Two Column
Optional section introduction.
Image as Block
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
Optional section introduction.
Image as Background
Lorem ipsum odor amet, consectetuer adipiscing elit. Nam risus sit maximus tristique, diam efficitur. Primis vitae platea laoreet lobortis luctus praesent eu.
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.
Optional Heading
Use this element for introductory paragraphs or callout blocks.
Narrow Block – Two Column
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.
Narrow 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.
Narrow Content – Two Column Full-Bleed
Optional section introduction.
Two-Column Full-Bleed
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.