Content Styling
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
- A normal ordered list
- Full of numbers for styling
- Numbers should match our styling
- 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
| Header | For | Style |
|---|---|---|
| 10 | 12 | 20 |
| 33 | 15 | 16 |
| 11 | 12 | 800 |
^ Horizontal rule ^
A verse block, for quoting many holy texts.
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.
There are many other blocks available, but these are the most likely to be used and to need styling.