Headers · DESIGN EDITION
Folio editorial header
A large editorial masthead with a warm paper palette, compact utility row and responsive section navigation.
Small vanilla JavaScript enhancement · MIT codeFree HTML snippets for your website.
Headers, footers, contact sections, pricing and galleries. Preview 30 original designs, take the code, and make the section fit your own website.
- HTML + Astro components
- Open code and individual downloads
- MIT code · scoped styles
30 designs
Footers · DESIGN EDITION
Signal studio footer
A graphic studio footer with oversized display type, a bright enquiry panel and a structured contact directory.
No JavaScript required · MIT code
Contact sections · DESIGN EDITION
Rooms project enquiry section
An image-led interior studio contact section with an editorial introduction and carefully grouped project enquiry fields.
Small vanilla JavaScript enhancement · MIT code
Pricing · DESIGN EDITION
Index design membership pricing
A design membership pricing section with a typographic introduction, asymmetric plan layout and explicit monthly and annual billing.
Small vanilla JavaScript enhancement · MIT code
Galleries · DESIGN EDITION
Habitat architectural gallery
An editorial architectural gallery with a panoramic lead image, staggered supporting images and a keyboard-operated viewer.
Small vanilla JavaScript enhancement · MIT code
Headers · HTML + ASTRO
Studio line header
A slim, typography-led studio header with an inline project link and a restrained underline navigation.
Small vanilla JavaScript enhancement · MIT code
Headers · HTML + ASTRO
Local services header
A two-level business header with contact details above a clear service navigation and appointment link.
Small vanilla JavaScript enhancement · MIT code
Headers · HTML + ASTRO
Restaurant wordmark header
A centered serif restaurant wordmark with a dedicated booking link and a separate menu row.
Small vanilla JavaScript enhancement · MIT code
Headers · HTML + ASTRO
Shop category header
A shop header with an announcement strip, brand row and product-category navigation.
Small vanilla JavaScript enhancement · MIT code
Headers · HTML + ASTRO
Editorial masthead header
A newspaper-style masthead with an issue line, strong publication name and section navigation.
Small vanilla JavaScript enhancement · MIT code
Footers · HTML + ASTRO
Minimal inline footer
A compact one-row footer with a wordmark, essential links and a simple copyright line.
Small vanilla JavaScript enhancement · MIT code
Footers · HTML + ASTRO
Agency contact footer
A large email-led agency footer with a project invitation, studio links and a quiet bottom bar.
Small vanilla JavaScript enhancement · MIT code
Footers · HTML + ASTRO
Local business footer
A practical business footer that groups address, opening hours and useful service links.
Small vanilla JavaScript enhancement · MIT code
Footers · HTML + ASTRO
Shop directory footer
A four-column shop footer with customer-service links, product categories and a newsletter area.
Small vanilla JavaScript enhancement · MIT code
Footers · HTML + ASTRO
Publication footer
A serif publication footer with a subscription invitation, section links and contributor routes.
Small vanilla JavaScript enhancement · MIT code
Contact sections · HTML + ASTRO
Split office contact section
A two-column contact section pairing an office address and telephone links with a labeled enquiry form.
Small vanilla JavaScript enhancement · MIT code
Contact sections · HTML + ASTRO
Minimal enquiry form
A narrow, understated contact form with a short introduction and generous reading space.
Small vanilla JavaScript enhancement · MIT code
Contact sections · HTML + ASTRO
Project brief contact section
An agency enquiry section with service and project-size choices alongside a short project brief.
Small vanilla JavaScript enhancement · MIT code
Contact sections · HTML + ASTRO
Appointment request form
A clearly labeled appointment enquiry with a preferred date, contact details and a notes field.
Small vanilla JavaScript enhancement · MIT code
Contact sections · HTML + ASTRO
Contact directory section
A contact section with separate general, project and office routes above a straightforward message form.
Small vanilla JavaScript enhancement · MIT code
Pricing · HTML + ASTRO
Agency service package pricing
Three plain service-package cards with defined scope, one-off prices and enquiry links.
No JavaScript required · MIT code
Pricing · HTML + ASTRO
Membership row pricing
A horizontal membership rate list with inclusions, monthly prices and individual action links.
No JavaScript required · MIT code
Pricing · HTML + ASTRO
Software pricing with billing switch
A software pricing section with monthly and annual options, explicit annual totals and live price announcements.
Small vanilla JavaScript enhancement · MIT code
Pricing · HTML + ASTRO
Feature comparison pricing table
A semantic feature comparison table with plan headers, row labels and included/not-included text.
No JavaScript required · MIT code
Pricing · HTML + ASTRO
Professional service rate card
A restrained service rate card with fixed-scope items, starting prices and an enquiry column.
No JavaScript required · MIT code
Galleries · HTML + ASTRO
Portfolio grid gallery
A three-column portfolio image grid with captions and a keyboard-operated lightbox.
Small vanilla JavaScript enhancement · MIT code
Galleries · HTML + ASTRO
Restaurant story gallery
An editorial photo layout with a leading image and smaller supporting views for a restaurant or venue.
Small vanilla JavaScript enhancement · MIT code
Galleries · HTML + ASTRO
Property feature gallery
A wide featured image and supporting photo grid for a property, room or venue presentation.
Small vanilla JavaScript enhancement · MIT code
Galleries · HTML + ASTRO
Product image viewer
A large main image with labeled thumbnail controls and a progressive image-link fallback.
Small vanilla JavaScript enhancement · MIT code
Galleries · HTML + ASTRO
Photography contact sheet
A numbered contact-sheet gallery with compact captions, fine rules and an optional enlarged view.
Small vanilla JavaScript enhancement · MIT codeBuild a whole site, or improve one section.
Use a complete website template when you need a starting structure. Choose a snippet when you need one reusable section. Our free website tools help prepare colors, typography, images and launch details.
Each snippet page explains its purpose, included behavior and integration steps. Individual downloads are open; category collection packs use a verified email link. Original code is MIT licensed, while included sample photographs retain their separate licenses.