← CLR Design CLR Blocks

Free website building blocks

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)

Navigation 4 blocks

Top bars and headers, the first thing every page needs.

Heroes 6 blocks

Openers that say what the page is about in one screen.

Hero: Headline and Two Buttons

Heroes

The classic opener: big headline, one supporting line, primary and secondary actions.

Hero: Email Capture

Heroes

Headline with an inline email form for launches, waitlists, and newsletters.

Hero: Split with Art Panel

Heroes

Text on the left, a CSS and SVG art panel on the right. No image files needed.

Hero: Centered over Gradient

Heroes

Centered headline on a warm gradient wash with a soft card edge.

Hero: Headline with Stats Row

Heroes

Headline, supporting line, one button, and a row of proof numbers underneath.

Hero: Story with Quote

Heroes

Editorial opener: a short story lead, then a customer quote with attribution.

Features 5 blocks

Ways to lay out what your thing does and why it matters.

Three-Column Icon Features

Features

Three features in a row, each with an inline SVG icon, title, and two lines of text.

Two-Column Feature List with Checkmarks

Features

Intro copy on the left, a checkmarked feature list card on the right.

Alternating Feature Rows

Features

Two feature rows that alternate text and art panel sides. Classic product page rhythm.

Bento Grid of Six Cards

Features

A bento-style grid: one wide card, one tall card, and four small ones.

Single Big Feature with Sub-Points

Features

One flagship feature presented large, with three supporting sub-points below.

Pricing 4 blocks

Honest price displays, from a single plan to three tiers.

Pricing: Three Tiers, Middle Highlighted

Pricing

The standard three-plan layout with the middle plan visually promoted.

Pricing: Two Tiers Simple

Pricing

Two plans side by side for products with a simple free/paid or basic/pro split.

Pricing: Single Plan with Checklist

Pricing

One honest price with a checklist of everything included. Great for services.

Pricing: Monthly / Yearly Toggle

Pricing

Three compact plans with a working monthly-yearly price toggle (small inline script).

Testimonials 4 blocks

Other people's kind words, nicely set.

One Big Centered Quote

Testimonials

A single testimonial given the whole stage: large type, centered, one attribution.

Quote Wall (Six Small Quotes)

Testimonials

Six short quotes in a masonry-feel grid for a dense wall of happy customers.

Quotes with Initial Avatars

Testimonials

Three quotes with circular initial avatars. No photos needed, always looks finished.

Galleries 3 blocks

Visual grids built from CSS and SVG. No image files needed.

Content 4 blocks

Text sections for articles, guides, and questions.

Article Header

Content

Blog or news article opener: kicker, headline, standfirst, byline and date.

Long-Form Text with Drop Cap and Pull Quote

Content

An essay-style text section with a drop cap, subheading, and a pull quote.

Two-Column Text with Sidebar Notes

Content

Main text column with a sticky-feeling sidebar of key facts and notes.

FAQ Accordion (Five Questions)

Content

Five questions with an accessible expand-and-collapse script. No library needed.

Calls to action 4 blocks

Bands that ask for the click, the signup, or the call.

Centered CTA Band

Calls to action

A bold centered band: headline, one line, one button. The universal closer.

Split CTA with Contact Line

Calls to action

Pitch on the left, phone-and-email contact card on the right. Built for services.

Newsletter Signup Band

Calls to action

Horizontal band with a pitch and an email form side by side.

App-Download Style CTA

Calls to action

Phone-adjacent pitch with two generic store-style download buttons (no brand logos).

Forms and contact 4 blocks

Contact, signup, search, and booking forms, labels included.

Contact Form

Forms and contact

Name, email, message, and a send button in a clean card. Labels included.

Simple Signup Form Card

Forms and contact

Account-style signup card: name, email, password, one button, quiet fine print.

Search Bar with Popular Tags

Forms and contact

A big search field with popular search chips underneath. For libraries and directories.

Footers 4 blocks

Endings with link columns, legal lines, and signup rows.

Social proof and stats 3 blocks

Numbers, press rows, and ratings that earn trust fast.

Stats Band (Four Numbers)

Social proof and stats

A full-width band with four big numbers and labels. Instant credibility section.

Press Mentions Row

Social proof and stats

An 'As featured in' row using styled text wordmarks only. No logos, no permission issues.

Rating Summary with Stars

Social proof and stats

Big average score, SVG stars, and a simple distribution bar breakdown.

Cards and listings 5 blocks

Listings for posts, people, products, events, and jobs.

Blog Post Cards (Three)

Cards and listings

Three article cards with gradient cover tiles, category tags, and read times.

Team Members (Four)

Cards and listings

Four people cards with initial avatars, names, roles, and one-line bios.

Product Cards (Three)

Cards and listings

Three shop cards with visual tiles, prices, and add buttons. Ready for a small store.

Event Listings (Three Rows)

Cards and listings

Three event rows with date badges, details, and spots-left notes.

Job Listings (Three Rows)

Cards and listings

Three job rows with titles, meta lines, tag chips, and apply links.