Navigation
A row of icons that swell as the pointer passes, the one beneath it most and its neighbours less, like a Mac's dock. On a phone, sliding a finger along the row does the same. Needs the EtchPress Runtime; without it it is a plain row of icon links.
How it works
Floating navigation at the foot of a portfolio. Quick links on a personal site. Contact shortcuts on a landing page. A playful secondary menu.
Options
label (the navigation's name for screen readers); items (repeater: label, href, icon: home, search, mail, calendar, message, phone, heart or star); scale (select: 1.7, 1.4, 2)
Open the item pageBrand and tagline, contact details with icons, up to three link columns as repeaters, and a legal row. Dark by default, light on a switch. Every link column is a repeater, so a client adds a link without touching the layout.
How it works
A site footer with contact details and up to three link columns. A dark footer for a light site, or the reverse. A footer a client can add links to without touching the layout.
Options
brandName, brandHref, logo (image URL, optional), tagline; tone (select: dark, light); phone, phoneHref, email, address (details, each optional); column1Heading and column1Links (repeater: label, url), the same for columns 2 and 3; legal (text); legalLinks (repeater: label, url)
Open the item pageBrand on the left, navigation in the middle, phone and a button on the right; sticky or static, light or dark, with a plain or bold phone. The navigation is a slot that holds Etch's own Nav and Burger components (included), so the menu, dropdowns and mobile panel are Etch's, styled with your tokens.
How it works
A service business header with phone and a booking button. A sticky header on light or dark. A header whose menu a client edits in WordPress.
Options
brandName (text); brandHref (link); logo (image URL, optional: shown instead of the wordmark); position (select: sticky, static); tone (select: light, dark); phoneStyle (select: plain, bold); showPhone (boolean); phone (text); phoneHref (link); showCta (boolean); ctaLabel (text); ctaHref (link); nav slot (Etch Nav and Burger, or anything)
Open the item page- Free 20-minute consultations, weekdays 8 to 6.Book one
An editorial masthead: a one-line announcement above, a serif wordmark with a small tag, navigation, phone and a button, ruled by a hairline. Sticky, with a shadow once the page has moved. The navigation is a slot holding Etch's own Nav and Burger (included).
How it works
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.
Options
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
Open the item page A floating pill: brand, navigation and a burger in a blurred capsule that hangs from the top of the page, with the button sliding in once the page has scrolled. Fixed on a site, in flow here so you can see it. The navigation is a slot holding Etch's own Nav and Burger (included).
How it works
A floating header for a modern product or studio site. A header whose button appears once the visitor has scrolled. A light header over a full-bleed hero.
Options
brandName (text); brandHref (link); logo (image URL, optional); position (select: fixed, in flow); ctaLabel (text); ctaHref (link); ctaShort (text, the label at narrow widths); nav slot
Open the item page- Business litigationContracts, partnerships and the disputes that come with them.
- EmploymentNon-competes, terminations and wage claims, both sides.
- Real estateLeases, title fights and construction defects.
- Estate planningWills, trusts and the family meeting nobody wants.
- AppealsWhen the first court got it wrong.
Five practices
Hover a practice to see the team that runs it.
An index of services or practice areas as numbered, ruled rows that link out, with a sticky photo beside them that swaps to the row under the pointer or keyboard focus. Rows are a repeater. Numbers count themselves.
How it works
A law firm's practice areas as ruled, numbered rows. A services index with a photo that follows the pointer. A table of contents for a long site.
Options
rows (repeater: title, short description, href, image URL); showAside (boolean); asideTitle and asideText (text, shown until a row is hovered)
Open the item page
Nothing matches. Clear the search.