Style guide

Header & footer

Header and footer are built as types — an HTML wrapper module plus a per-type stylesheet. This page’s own header and footer are live examples of the two below.

Header

Header type — 1 row: logo · simple nav · contact

Module Header - Wrapper - 1 row, logo - simple nav - contact. Stylesheet header_1-row_logo_simple-nav_contact.css brands the bar; the menu is owned by header_dropdown_nav_simple.css.

ElementRole
#headersticky bar, bottom hairline, one-row flex .inside
.logobrand image / link, left
.navigationthe nav module, pushed right (margin-left:auto)
.contact a.btnthe CTA button, compacted for the bar
.menumobile toggle — shown ≤750px, hidden on desktop

Bar markup

The wrapper module’s HTML (nav injected via ).

nav
Contact ≡ 
<div class="logo"><a href="#">Logo</a></div> <div class="navigation">nav</div> <a class="btn" href="#">Contact</a> <a class="menu" href="#menu">≡</a>

Footer

Footer type — dark: brand + 3 nav columns + credits bar

Module Footer - Wrapper. Stylesheet footer_brand_3-nav-columns_credits-bar.css — a dark --prime surface, three .col-1-3 nav columns and a bottom credits bar.

ElementRole
#footerdark --prime surface, on-dark text
.footer_top.rowbrand column + .col-2-3.row of three .col-1-3 nav columns
.footer_bottom .creditscopyright · policy nav · studio credit

Scroll to the bottom of this page to see the footer type rendered live.