Simple Top Bar
NavigationLogo on the left, links on the right, wraps cleanly on small screens.
Fifty free website building blocks from CLR Design. Every block is one self-contained HTML file with all its CSS in a single style tag: no frameworks, no webfonts, no image files. Preview each one live below, copy its code, or download the file and drop it into your site.
Free for anything, personal or commercial. Credit to CLR Design is appreciated but never required.
Download all 50 blocks (.zip)Openers that say what the page is about in one screen.
The classic opener: big headline, one supporting line, primary and secondary actions.
Headline with an inline email form for launches, waitlists, and newsletters.
Text on the left, a CSS and SVG art panel on the right. No image files needed.
Centered headline on a warm gradient wash with a soft card edge.
Headline, supporting line, one button, and a row of proof numbers underneath.
Editorial opener: a short story lead, then a customer quote with attribution.
Ways to lay out what your thing does and why it matters.
Three features in a row, each with an inline SVG icon, title, and two lines of text.
Intro copy on the left, a checkmarked feature list card on the right.
Two feature rows that alternate text and art panel sides. Classic product page rhythm.
A bento-style grid: one wide card, one tall card, and four small ones.
One flagship feature presented large, with three supporting sub-points below.
Honest price displays, from a single plan to three tiers.
The standard three-plan layout with the middle plan visually promoted.
Two plans side by side for products with a simple free/paid or basic/pro split.
One honest price with a checklist of everything included. Great for services.
Three compact plans with a working monthly-yearly price toggle (small inline script).
Other people's kind words, nicely set.
Three customer quotes in cards with names and roles underneath.
A single testimonial given the whole stage: large type, centered, one attribution.
Six short quotes in a masonry-feel grid for a dense wall of happy customers.
Three quotes with circular initial avatars. No photos needed, always looks finished.
Visual grids built from CSS and SVG. No image files needed.
Three visual tiles made from gradients and SVG, each with a caption bar.
Uneven tiles in CSS columns for a relaxed, editorial gallery feel.
One large feature visual with a caption bar for a hero project or property.
Text sections for articles, guides, and questions.
Blog or news article opener: kicker, headline, standfirst, byline and date.
An essay-style text section with a drop cap, subheading, and a pull quote.
Main text column with a sticky-feeling sidebar of key facts and notes.
Five questions with an accessible expand-and-collapse script. No library needed.
Bands that ask for the click, the signup, or the call.
A bold centered band: headline, one line, one button. The universal closer.
Pitch on the left, phone-and-email contact card on the right. Built for services.
Horizontal band with a pitch and an email form side by side.
Phone-adjacent pitch with two generic store-style download buttons (no brand logos).
Contact, signup, search, and booking forms, labels included.
Name, email, message, and a send button in a clean card. Labels included.
Account-style signup card: name, email, password, one button, quiet fine print.
A big search field with popular search chips underneath. For libraries and directories.
Date, time, party size, and a reserve button in a two-column card.
Numbers, press rows, and ratings that earn trust fast.
A full-width band with four big numbers and labels. Instant credibility section.
An 'As featured in' row using styled text wordmarks only. No logos, no permission issues.
Big average score, SVG stars, and a simple distribution bar breakdown.
Listings for posts, people, products, events, and jobs.
Three article cards with gradient cover tiles, category tags, and read times.
Four people cards with initial avatars, names, roles, and one-line bios.
Three shop cards with visual tiles, prices, and add buttons. Ready for a small store.
Three event rows with date badges, details, and spots-left notes.
Three job rows with titles, meta lines, tag chips, and apply links.