Hero (Block)

Notes:

The hero block can is a representation of what’s displayed above the fold. On most websites there is a special visual treatment for the block that contains the title of the page and usually some decorative imagery.

The Boilerplate hero block simply consists of the Heading 1 of the page as well as a hero image. The default styling uses the Hero Image as the background and overlays the Heading 1.

Out of the box the Hero block is created automatically through “Auto Blocking” if the first image appears before the Heading 1 in the document.

Example:

See Live output

Content Structure:

See Content in Document

Code:

This code is included in boilerplate, there is no need to copy it.

Boilerplate Block Code

Auto Blocking Boilerplate Code