All Regions

Typography • Content & Block Types • Iconography • Block Regions

This page demonstrates how the block regions work. This section you are reading now is the main content area. For simplicity in this presentation, we have turned off the edit tabs so it's a better reflection of what a site visitor might see.

Sample Heading

In addition, this page demonstrates how a few of the typographical elements might fit in with each other. The paragraph is showing how an H2 heading might look with it's line height and relative size. If you are curious to see a simplified version of how the blocks all fit together you can visit the block region demonstration page.

Just an H3 Heading

The paragraph doesn't really provide any additional information. It's only purpose is to make the page longer. If you are reading this then you are a go-getter. You are one to push beyond the limits. For that, I commend you. If you aren't reading this, I don't like you. But, that won't matter, because you'll never know it because you didn't read this.

This is a sample of how a block could look as a message. It uses the outline transposed block style.

This is a sample of how a block could look in the header region. Often you'll have social links, phone numbers and other very important detail in this block. It uses the outline block style to demonstrate that styling. This is the header region.

This is a sample of how a block could look in the banner region. This region is full-width and is generally used to show a banner image. The secondary block style has been added but typically you'd have a full-width image or a hero banner. This is the banner region.

This is a sample of how a block could look in the preface region. This region is the standard width. This shows the default styling. This is the preface region.

This is a sample of how a block could look in the content top region. This region is the standard width. This shows the default styling. This is the content top region.

All Regions

Sample Heading

Just an H3 Heading

This is a sample of how a block could look in the content bottom region. This region is the standard width. This shows the default styling. This is the content bottom region.

This is a sample of how a block could look in the postscript region. This region is the standard width. This shows the default styling. This is the postscript region.

This is a sample of how a block could look in the postscript dark region. This region is the standard width. This shows the default styling. This is the postscript dark region.

This is a sample of how a block could look in the footer region. This region is the standard width. This shows the default styling. This is the footer region.

Help Region Block

This is a sample of how a block could look as a message. It uses the outline transposed block style.

Topper Region Block

This is a sample of how a block could look in the header region. Often you'll have social links, phone numbers and other very important detail in this block. It uses the outline block style to demonstrate that styling. This is the header region.

Banner Region Block

This is a sample of how a block could look in the banner region. This region is full-width and is generally used to show a banner image. The secondary block style has been added but typically you'd have a full-width image or a hero banner. This is the banner region.

Preface Region Block

This is a sample of how a block could look in the preface region. This region is the standard width. This shows the default styling. This is the preface region.

Content Top Region Block

This is a sample of how a block could look in the content top region. This region is the standard width. This shows the default styling. This is the content top region.

All Regions

Sample Heading

Just an H3 Heading

Content Bottom Region Block

This is a sample of how a block could look in the content bottom region. This region is the standard width. This shows the default styling. This is the content bottom region.

Postscript Region Block

This is a sample of how a block could look in the postscript region. This region is the standard width. This shows the default styling. This is the postscript region.

Postscript Dark Region Block

This is a sample of how a block could look in the postscript dark region. This region is the standard width. This shows the default styling. This is the postscript dark region.