Header: masthead

What you can build with it

An editorial or law firm masthead with an announcement line. A header for a publication, a practice or a studio. A sticky masthead that gains a shadow once the page moves.

Props

showAnnouncement (boolean); announcement (text); announcementLinkLabel and announcementHref; brandName (text); brandTag (text, the small suffix such as LLP); brandHref (link); position (select: sticky, static); showPhone, phone, phoneHref; showCta, ctaLabel, ctaHref; nav slot

States shown

Scrolled (a shadow appears once the page has moved 24px, script included); hover and focus on the wordmark and phone; the button takes ACSS button states; Etch's nav states. Collapses behind the burger below 64rem of container width; the phone hides below 72rem.

How to change it

Content and options are 14 props in the component's settings panel, and what goes inside is a slot you fill with your own blocks. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .etch-burger, .etch-nav, .masthead. Its behaviour is a small script that travels with the component; no plugin and nothing to install.

ACSS tokens used

neutral-ultra-light, base-ultra-dark, text-light, text-dark, primary-dark, heading font family, h4, text-s, content-width, space-xs, space-s, box-shadow-1, focus tokens, transition

ACSS requirements

ACSS 4 defaults with the accessibility classes on (skip link). Uses btn–primary. Etch's Nav Basic and Burger come with the paste.

Version history

Version 1.0.1, October 3, 2026: The small tag beside the wordmark is now the same size as the announcement line, so the header uses three text sizes and none smaller than the small-text size. Version 1.0.0, September 17, 2026: First release.

Tested with

Etch 1.6.7 and ACSS 4.0.1. Version 1.0.1.