Patterns @ 10px – Spectra – Boxed
Sample Elements and Guidelines for Page-building in WordPress
B. Boxed
Patterns with a contained background/card.
Boxed – 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).
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.
Subheading
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
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.
Boxed – Grid (Basic)
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.
Boxed – Grid (CTA)
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 (Image + CTA)
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.