weblocks

The block wall

Every one of the 54 bricks in the registry, rendered live. Each frame below is that brick's own page — open any of them to see the complete, self-contained document weblocks emits.

app-shell

A persistent bottom tab bar for app-like navigation, each tab an optional icon plus a label linking to a view.

no JS
Open full page ↗

announcement-bar

A dismissible full-width strip for a short promo or notice, with an optional inline link and info/promo/warning tone.

island: announcement-bar
Open full page ↗

install-prompt

A dismissible toast inviting visitors to install the site as an app, with step-by-step "Add to Home Screen" instructions matched to their platform (iOS, Android, Chrome/Edge, macOS Safari). Pair it with a PWA-enabled manifest.

island: install-prompt
Open full page ↗

hero

Top-of-page hero: a big headline with optional eyebrow, subheading, and CTA — optionally over a full-bleed background image banner with a legibility overlay.

no JS
Open full page ↗

hero-app

An app landing hero: a headline and subhead over a primary install button, with a horizontal scroll row of app screenshots.

no JS
Open full page ↗

profile-header

A résumé/CV header: avatar, name, role, location, a contact + social row, and optional Download-PDF and Share buttons.

island: resume
Open full page ↗

experience

A résumé section of dated entries (role, org, period, location, bullets). Reuse for Experience, Education, Certifications by changing the title.

no JS
Open full page ↗

skills

Grouped skills shown as tags (with optional proficiency dots) or labelled level bars; also for languages and tools.

no JS
Open full page ↗

features

A grid of value propositions, each with an optional icon/emoji, a title, and a short line of text.

no JS
Open full page ↗

about

A story/mission section: eyebrow, title, prose body, and an optional side image (choose which side).

no JS
Open full page ↗

rich-text

A typed prose section with ordered headings, paragraphs, quotes, and bullet/numbered lists — a safe freeform-content block, never raw HTML.

no JS
Open full page ↗

split

Alternating image-and-text rows; the image side flips each row, and rows without an image collapse to centered text.

no JS
Open full page ↗

steps

A numbered how-it-works / process list: an optional title and subtitle over auto-numbered step cards, each with a title and short text.

no JS
Open full page ↗

stats

A grid of metric counters: each stat shows an optional prefix/suffix around a big value with a muted label, with an optional count-up animation.

island: stats
Open full page ↗

progress

Progress and goal indicators — fundraising totals, completion, capacity or scarcity — as bars, discrete segments, donut rings or scaled meters, each with units and an optional target marker.

island: progress
Open full page ↗

services-catalogue

A grid of services or products, each with a name, optional price, description, and link. Use for "what we offer".

no JS
Open full page ↗

product

A shoppable product grid: each item has an image, price (with optional "was" price and badge), and a buy/enquire link. Use for retail and e-commerce; the cart/checkout is the host's.

no JS
Open full page ↗

pricing

A row of pricing/tier cards, each with a name, price, feature list, and a call-to-action button; one plan can be highlighted.

no JS
Open full page ↗

logos

A centered strip of client or partner logos (grayscale until hover), each optionally linking out, under a short heading.

no JS
Open full page ↗

team

A grid of people cards with photo (or initials), name, role, a short bio, and optional social links.

no JS
Open full page ↗

video

A responsive embedded video from YouTube or Vimeo (by id or URL) or a self-hosted file, with an optional caption.

no JS
Open full page ↗

map

An embedded location map for a place or address query, with configurable zoom and height and a link to the full map.

no JS
Open full page ↗

timeline

A vertical timeline of chronological milestones, each with an optional date, a title, and supporting text.

no JS
Open full page ↗

tabs

Tabbed content panels that switch with no JavaScript; each tab has a label and a text panel.

no JS
Open full page ↗

accordion

Generic collapsible disclosure panels (native details/summary, no JavaScript); each panel has a heading and body.

no JS
Open full page ↗

testimonials

A grid of customer quotes, each with the quote text and an optional author name and role.

no JS
Open full page ↗

reviews

Star-rated customer reviews (1–5 stars) each with an optional author, date, and source (Google, Yelp, …), plus an optional aggregate score. Richer than plain testimonial quotes.

no JS
Open full page ↗

faq

An accordion of question/answer pairs. Expands/collapses natively (no JS).

no JS
Open full page ↗

chat-thread

A conversation rendered as a thread of rich message bubbles: named participants with avatars or initials, optional per-message times, and typed message bodies that mix text, code, images, lists and quick replies. Static — an authored transcript for showing how an assistant or support team answers, not a live chatbot.

no JS
Open full page ↗

blog-list

A post index as a grid of cards, each with an optional cover image, tag, date, title, and excerpt linking to the post.

no JS
Open full page ↗

blog-post

A single article layout with an optional cover, title, author/date, and a typed body (headings, paragraphs, quotes, bullets).

no JS
Open full page ↗

feed

A generic data-driven list of items in a list or card layout, each with a title, optional subtitle/text, badge, image, and link.

no JS
Open full page ↗

booking

An appointment/reservation request form (service, date, time, contact) that posts to a host-provided runtime. For booking-driven businesses — salons, clinics, gyms, hotels, events. No raw HTML.

island: bookingneeds host runtime
Open full page ↗

contact-form

A configurable contact form with typed fields (text, email, tel, textarea, select, checkbox) that posts to a host-provided runtime. No raw HTML.

island: contact-formneeds host runtime
Open full page ↗

newsletter

An email-capture form that posts to a host-provided runtime; renders inert until a runtime is wired.

island: newsletterneeds host runtime
Open full page ↗

auth

A provider-agnostic sign in / sign up panel: social provider buttons and an optional email form that start auth via a host runtime.

island: authneeds host runtime
Open full page ↗

cta

A full-width call-to-action band: a headline, optional subheading, and one button. Use near the bottom.

no JS
Open full page ↗

contact-details

A contact info block: address, phone, email, and opening hours (each optional). Read-only — no form.

no JS
Open full page ↗

hours

Structured weekly opening hours (24h times per day, split shifts allowed) rendered as an accessible table with a live "open now / closed" badge. Use for shops, cafés, salons, and clinics.

island: hours
Open full page ↗

directions

A location card with deep links that open the visitor’s map app (Google/Apple Maps) for directions, from an address, GPS coordinates, or a pasted map link.

no JS
Open full page ↗

divider

A visual section break rendered as a thin line, a dotted rule, or a gradient bar.

no JS
Open full page ↗

spacer

Deliberate vertical whitespace between sections, in one of four sizes (sm, md, lg, xl).

no JS
Open full page ↗

credit

A one-line attribution — "Powered by / Created by / Managed by <name>" — with an optional logo and an outbound link that opens in a new tab; credits the maker or operator (use `copyright` for ownership).

no JS
Open full page ↗