Single page site

A starter for a “one-pager” type of site that has a hero, an anchor menu, and several page sections with anchors.

Categories

Page Starters

Keywords

Preview (screenshot)

Copy Pattern

Notes

There are currently no notes for this pattern.

Pattern Markup

<div id="unityblocks-hero" class="wp-block-unityblocks-hero hide-content" data-herotype="heading-hero" data-image="{"url":"https://placehold.co/1920x512/00a3e0/FFFFFF/png","altText":"","cssClass":[],"size":"medium"}" data-subtitle="{"text":"Page starter","highlightColor":"white","maxWidth":"","cssClass":[]}" data-title="{"text":"The one-pager","highlightColor":"gold","maxWidth":"","cssClass":[]}" data-contents="[{"text":"A page with multiple sections and an anchor menu","maxWidth":"","cssClass":[],"highlightColor":"white"}]" data-contentscolor="white"></div>

<div id="unityblocks-anchor-menu" class="wp-block-unityblocks-anchor-menu" data-items="[{"text":"Section one","targetIdName":"section-one"},{"text":"Section two","targetIdName":"section-two"},{"text":"Section three","targetIdName":"section-three"},{"text":"Section four","targetIdName":"section-four"}]" data-firstelementid="" data-focusfirstfocusableelement="false"></div>

<h2 class="wp-block-heading" id="section-one">Section one </h2>

<p class="lead">This is a paragraph that has been given the "lead" class for when you want to emphasize something.</p>

<p>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.</p>

<h2 class="wp-block-heading" id="section-two">Section two </h2>

<p class="lead">This is a paragraph that has been given the "lead" class for when you want to emphasize something.</p>

<h2 class="wp-block-heading" id="section-three">Section three </h2>

<p class="lead">This is a paragraph that has been given the "lead" class for when you want to emphasize something.</p>

<h2 class="wp-block-heading" id="section-four">Section four </h2>

<p class="lead">This is a paragraph that has been given the "lead" class for when you want to emphasize something.</p>

<p>This layout is <strong>not</strong> optimal for text, as running text across the full content area like this violates the design standard calling for no more than 72 characters per line.</p>