Page builder

0 of 40 blocks

Search blocks

Header

Header Centered
Sticky header with the brand on the left, navigation centered and a call to action on the right. It clears and fades on scroll down; link labels roll on hover.
Header Split
Sticky header with brand and links at the left and two rolling-label buttons at the right; menu inside the bar below 1024px.

Hero

Hero Projects
Headline with rating, avatars and two actions, then a row of recent projects that open on hover.
Hero Image
Page heading and summary over a wide image that settles into place as it scrolls into view; optional breadcrumbs and facts.
Hero Bento
Inner page opening above a grid of a large cover photo and two photo + fact rows.
Hero Title
Inner page opening: breadcrumbs, page heading, divider and a short description.
Hero Split
Split title with a lead and action, two photos side by side and three figures with dividers.
Hero Video
A centered label pill, heading, lead and two buttons above a wide video that loads and plays on click.
Hero Showreel
A short line beside a display heading, a text block with a corner mark and two buttons, and a small showreel of your work.
Hero Cover
A full-bleed video or photo under a dark cover, the heading and buttons at the bottom, and figures with client quotes turning in glass cards.

Media

Media Band
A full-width looping video or photo between two sections that drifts against the page as it scrolls past.

Features & services

Services Accordion
Section header and every service as a numbered row that opens to photos, a description, a link and the tools used.
Services Pricing
What a service includes beside a pricing card whose plan switch swaps the list, price and note.
Features Collage
Photo collage with floating highlight chips beside a heading, numbered feature cards and an action.
Services Alternate
A row per service: a panel with the description, tools and a link beside a large photo, sides alternating; rows fill on hover.
Services Cards
A heading with a button, then two-column service cards whose photo settles and panel rises on hover.
Features Split
A tall photo beside a label, heading, two paragraphs, a titled check list and a button, on the muted surface.
Services List
Services as rows with a small photo that grows as the row opens, one at a time — or every row open, as on a services page.
Features Bento
A split title above a grid of six text cards among five photos, the first photo two columns wide.

Process

Process Overlay
Numbered steps joined by a line, in a card over a full-width photo.
Process Autoplay
Steps that take turns every few seconds beside a photo that cross-fades to the active one.
Process Slideshow
A heading, then numbered steps one slide at a time — the number, title and text beside a photo — with two arrows under the slide.
Process Panels
A title beside a row of step panels: one open at a time, with a rule, a note and a photo, the rest narrowed to their number.

Projects & work

Projects Grid
Section header and a two-column grid of project cards whose photos zoom on hover.
Projects Gallery
Every project as a grid of cards or a compact list, with a Grid / List switch.
Projects Next
End of a project page: the heading beside the next project's card.
Projects Case Study
A project's overview, process and results, with parallax photos and photos that move into place as you scroll.
Projects Mosaic
A heading with buttons, six projects as a mosaic of wide and narrow cards, a featured project on a dark band, and the rest in a grid.

Listings

Listings Featured
A split title above five listing cards, the first twice as wide; photos zoom on hover.
Listings Locations
A centered heading above area cards — three, then two a row — whose photos settle on hover.
Listings Tabs
A split title, category tabs and full listing cards — location, beds, baths, area, agent and price — with a button to all listings.
Listings Filter
A page title, then a filter card that stays in view beside the listings from 1024px and folds away below; chips narrow the grid.
Listing Detail
A listing page: title, price and figures, a wide photo, then description, detail lists, gallery and video beside the agent, a tour form and nearby listings.

Stats & values

Stats Chart
A short introduction centered above a chart of percentages whose bars grow into view.
Values List
Small section header above numbered rows of values: number, title and description.
Stats Row
Three figures with a title and a line of text each, split by thin lines on an inverted band.
History Timeline
Milestones on a line — four columns on wide screens, a vertical timeline below.
About Facts
A long statement, a photo beside two short paragraphs and an action, then four figures on cards.
Values Grid
A split title, then a tall photo beside four numbered value cards.
About Collage
A label and heading, three values side by side, then a staggered collage of three photos with short texts and two buttons.
About Quote
A pitch with the key figures as rows and a button, beside a wide photo over a smaller one and a quote card.

Team

Team Grid
Small section header above portraits with name, role and email, in up to three columns.
Team Profile
One person: a tall portrait, name, address, bio and a list of ways to reach them.

Testimonials

Testimonials Slideshow
Heading over a photo, then client quotes in an auto-playing, draggable slideshow.
Testimonials Marquee
Review cards in two rows drifting in opposite directions, a snapping carousel on smaller screens.
Testimonials Mosaic
Five client quotes on dark and light cards of two widths around a short looping video.
Testimonials Grid
Client quotes on cards in fixed-width, centred columns under a centred heading, each card rising in as it comes into view.
Testimonials Logos
A label and a heading beside an endless strip of client logos with faded edges.
Testimonials Portraits
The clients' portraits are the tabs: the chosen one is large, the others share the rest, and the quote beside them cross-fades, with its title, role and rating.

FAQ

FAQ Split
A heading and lead, then a portrait photo beside questions that open on their own.

Blog

Blog Grid
Section header and a grid of post cards whose photos zoom on hover, optionally paged with Load more.
Blog Article
The body of a post beside its date and category, styled for your Markdown or MDX.

Careers

Careers Accordion
Open roles as rows that open to a summary, a link and the requirements, with Load more.
Careers Application
A role's title, summary and lists beside an application form with sending, success and error states.

CTA

CTA Marquee
A large invitation and a button above an endless strip of photos running edge to edge.
CTA Gallery
An invitation to start a project beside six square photos of past work — or, with details, ways to reach you beside wider photos.

Contact

Contact Split
Every way to reach you beside an enquiry form with services checkboxes and sending states.

Footer

Footer Columns
Brand and contact, large page links, social rows that fill on hover, a very large closing link and the copyright.
Footer Newsletter
A call-to-action photo card over the edge of an inverted footer; contact, two link columns and a newsletter sign-up.
Footer Logo
A calm footer: a large wordmark, a statement with an action beside three link columns, and the legal line.

Start from

Shape

Corner radius0.625rem

Type

Type scale

SmallDefaultLarge

Heading font

Body font

Use it in your project

Replace the matching lines in your project's app/globals.css and add the font code to app/layout.tsx. Every block you install follows it.

See the code

app/globals.css

/* Framebrick Blocks theme: replace these lines in app/globals.css. */
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.145 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.145 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --text-display: clamp(2.5rem, 1.75rem + 3.75vw, 4.5rem);
  --text-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --text-h2: clamp(1.875rem, 1.45rem + 1.9vw, 3rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --section-y: clamp(4rem, 8vw, 8rem);
  --container: 80rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.195 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.195 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.145 0 0);
  --secondary: oklch(0.245 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.235 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.235 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
}

/* The fonts are loaded in app/layout.tsx; point the font lines of @theme inline at them. */
@theme inline {
  --font-sans: var(--font-sans);
}

app/layout.tsx

// Imported under their own names, so they can't clash with fonts your layout already imports.
// If it already loads your body font as --font-sans, leave the sans lines out.
import { Geist as SansFont } from "next/font/google";

const sans = SansFont({ subsets: ["latin"], variable: "--font-sans" });

// On <html>: className={`${sans.variable}`}