Page structure

Home head

The top of the home: name and role, the 5px rule, the statement, and the intro.

Examples

Home headOpen “Home head” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

When to use it

Only on the home and in every page’s ending.

Live: Home.

Anatomy

Name row: p.name-row: name (link to /) left at 17/26, 20/28 from 768; role label .name-role right at 13/20, 15/22 from 768.
Rule: .rule-5: 4px phone, 5px from 768. The mark is this shape.
Statement: h1.display (h2 in a page ending): the tagline, word for word.
Intro: .home-now (the current role) and .prose (where the work sits), two columns from 768.

Behaviour

Phone, tablet, desktop: Padding top 40, 56, 72. Statement gap 28, 48, 64.
Motion: None.

Accessibility

The statement is the home’s only h1.

Words

Tagline and role label from brand/README.md, section 1. The role sentence is kept current on the site.

Code

Classes: .home .home-head .name-row .name-role .rule-5 .home-intro .home-now. Styles in site/assets/css/site.css.

<div class="home-head wrap">
<p class="name-row"><a href="/">Niklaus Gerber</a><span class="name-role">Digital &amp; Platform Executive</span></p>
<div class="rule-5"></div>
<h1 class="display">Twenty years making digital stick in organisations not built for it.</h1>
<div class="home-intro">
<div>
<p class="home-now">Vice President Digital at <a href="https://corporate.vorwerk.com" rel="noopener noreferrer" target="_blank">Vorwerk Home</a>, responsible for product, platform, and <span style="white-space:nowrap">e-commerce</span> across Europe. Before that, I founded the product function at <a href="https://www.nzz.ch" rel="noopener noreferrer" target="_blank">NZZ</a>.</p>
<p class="prose">My work sits where digital ambition meets legacy platforms, many stakeholders, and teams that need a reason to change. At NZZ, we shipped AI audio in 2018, among the first publishers anywhere to do so.</p>
</div>
</div>
</div>