Content Styling

The goal of this page is to allow our designer to adjust various Gutenberg Block styles to match our design system. This will allow our content editors to create pages quickly, without having to worry about manually adding classes and custom code. Different text styles and options will be used as visual examples.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The following blocks will be divided into different Gutenberg column configurations, in case we need to adjust styling for those.

50/50 Column left

  • A normal unordered list
  • Full of bullets for styling
  • Bullets should match our styling
  • Very long items with wrapping text should also be considered.

50/50 Column right

  1. A normal ordered list
  2. Full of numbers for styling
  3. Numbers should match our styling
  4. Very long items with wrapping text should also be considered.

33/33/33 Column left

Quoted text block, for quoting certain people.

Citation line for attribution

33/33/33 Column middle

// Code blocks likely won't be used by our dealers. But maybe we should

echo "consider them anyways";

33/33/33 Column right

Likewise, preformatted text will likely not be used by our dealers.

70/30 Column left

Pull quote for styling

Pull quote citation line

70/30 Column right

Table caption

^ Horizontal rule ^

A verse block, for quoting many holy texts.
Image block with image caption

A cover image block

These next 3 blocks are within a group. Not sure if that should be styled 🤷‍♂️.

^^ File downloads will be used occasionally for service brochures.

Media with content block.

You can add a bunch of blocks to this side.

Video embed block and caption

Contact Us


There are many other blocks available, but these are the most likely to be used and to need styling.