This is the hero and it has a nice title
You can have additional text below the header and the image
You can have additional text below the header and the image. But try not to write too much as you’ll lose balance in the block. If you add content to the block to the right the layout may get a bit funky.
This section is an infopanel
The info panel contains a block pattern
This fist column takes up about 75% of the page width on desktops. And won’t go beyond that even if you type in additional content.
You can add whatever block to it that you like. But keep it simple. Paragraph text or lists will work best.
Don’t forget you can change the background of the entire group.
Intro to below
This bit can serve as an introduction to the two columns below. On desktops they’ll be 50% wide each. And they have colored backgrounds in the headers which you can easily change or remove if you prefer.
This is a heading 4
- Unordered lists show up like this.
- But you don’t have to have lists in this column, that’s just how the original site had them.
- You can remove this list and add paragraphs
- Just like the content on the column on the right.
- All you have to make sure is that there is a bit of balance with the text to the right, if you can.
This is also a heading 4
This part of the info panel is just another column, but instead of a list it’s filled with paragraphs.
You can edit them as you like and keep adding more.
You can even add more blocks below these two columns if you find that you need to do just that. Just remember not to add the blocks inside one of these two columns, or you&aposll get a really strange layout.
This is a header pattern
Content in two columns with headers
- Unordered lists show up like this.
- But you don’t have to have lists in this column, that’s just how the original site had them.
- You can remove this list and add paragraphs
- Just like the content on the column on the right.
- All you have to make sure is that there is a bit of balance with the text to the right, if you can.
Content in two columns with headers
This part of the info panel is just another column, but instead of a list it’s filled with paragraphs.
You can edit them as you like and keep adding more.
You can even add more blocks below these two columns if you find that you need to do just that. Just remember not to add the blocks inside one of these two columns, or you’ll get a really strange layout.
This is a regular group in two columns with a background color
This is not a pattern but just a groupd with a background, you can copy and use around the site.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Balance is important, so if you use columns make sure the editorial text is of similar length in both on desktops.
Other types of content
You have four options for buttons which you can copy from here:
This is how Heading 2 looks
It gets a paragraph below it so you can see how close the text is to the header1.
This is Heading 3
It also gets a paragraph below it so you can see how close the text is to the header.
This is heading 4
It also gets a paragraph below it so you can see how close the text is to the header.
This is a quote by some one smart. You’ll want to use the quote block for this. The quote mark may look a little off in the backend, but is balanced on the front end.
Doctor von Smarthousen
These are lists
- Unordered lists have bullets
- And points that can be longer or shorter if you like
- Ordered lists get numbers
- Which you can use to your heart’s desire
Heading 3 with a list below it
- Just so you can see how close or far
- The list actually is from the heading
Heading 4 with a list below it
- Just so you can see how close or far
- The list actually is from the heading
And this is a regular paragraph with text below it. And yes the list is a regular line away from the paragraph. This is normal in typography.
- Just so you can see how close or far
- The list actually is from the heading
Images
Large images can be “wide width”
Smaller images should be regular width