Image & Text Page Block

This is a foundational page block type, and contains a side-by-side layout on desktop, featuring an image in one column and paragraph of text in the second column. Several variations exist for this block type.

How To | Style Guide | Content Styles | Accessibility Tips | Page Blocks

Sample Hero Block Title

Lorem ipsum dolor sit amet, at epicurei volutpat adolescens pro, dolore voluptua indoctum no eos. Id has mutat paulo copi.

CTA Button Style

Optional Pre-title

H2 – Text / Image Page Block (white bg)

The paragraph text that immediately follows the h2 can have the .intro class applied to it. Note, though, we should be mindful with how much text we enlarge here.

This is standard paragraph text sizing. Visually, a couple of sentences of this text styling helps this whole page block looks best.

Primary Button Example

Optional Pre-title

H2 – Image / Text Page Block (light blue bg)

Technically, you can use other images that are not sized 900×900. For example, this section uses an image that is 900×600.

For what it’s worth, though, we prefer to use the larger 900×900 image size.

Primary Button Example

Optional Pre-title

H2 – Image / Text Page Block (light blue bg)

Technically, you can use other images that are not sized 900×900. For example, this section uses an image that is 900×600.

For what it’s worth, though, we prefer to use the larger 900×900 image size.

Primary Button Example

Optional Pre-title

H2 – Text / Graphic Page Block (white bg)

We really like how the Brand Guidelines use these really cool diagrams / illustrations.

Let’s not forget about these kinds of graphics. Hopefully, the Horton team can produce a variety of these great graphics to supplement the storytelling on each page. Similar strategy as when using photography, we’d prefer for this image upload to be 900×900, but if it was 900×600, that could work, too.

Primary Button Example