Blocks
Sections of a page, ready to paste: 62 of them across 10 categories, built from 44 exports of the published package and nothing else.
Each block page shows the section running in its own frame, at any of three widths, above the file that renders it — read at build time, so the code you copy is the code you saw. Ten heroes and ten headers, because those are the ones people go looking for.
Heroes (10)
Centred hero
The classic: eyebrow, headline, one paragraph and two buttons, centred with a capped measure so the lead stays readable.
Split hero with media
Copy on the left, a product image on the right. Below 48rem the image stacks under the text without a breakpoint of yours.
Media-first hero
The same split, with the picture before the copy. mediaPosition="start" moves it on wide screens; on phones it still stacks under the text.
Hero over a photo
A full-bleed photograph behind the copy with a gradient scrim. The dark overlay switches the text to light for you.
Full-screen dark hero
A viewport-height hero on a dark gradient with a light headline. minHeight="screen" centres the copy vertically.
Hero with a logo strip
A centred hero followed immediately by the companies that already use the product — social proof before the fold ends.
Hero with stats
A start-aligned hero with three numbers underneath it. The figures do the persuading the adjectives would have done.
Product launch hero
Announcement badge, headline, and a screenshot on a soft gradient card. For the day a new version goes out.
App hero with store buttons
A mobile app hero: phone screenshot beside the copy and two store badges rendered as outline buttons.
Hero with an email form
A hero whose only action is an email field: for a launch page, a waitlist or a newsletter with nothing else to sell yet.
Headers (10)
Simple header
Brand, four links and two actions. The toggle handles the phone menu with aria-expanded and aria-controls already wired.
Header with centred links
layout="center" puts the links in the middle of a wide bar, brand on one side and the action on the other.
Header with links at the end
layout="end" pushes the links up against the actions, leaving the brand alone on the start edge.
Transparent header over a hero
variant="transparent" drops the surface and border so the bar sits on the hero backdrop. The dark overlay lights the text.
Floating header
variant="floating" insets the bar with a radius and a shadow, and keeps a matching offset when sticky.
Header with search
A search field in the actions slot for a docs or commerce site, with a keyboard hint so people learn the shortcut.
Header with theme toggle
A ThemeToggle in the actions slot beside the primary button. It reads and writes the same theme your ThemeProvider does.
App header with account menu
An application header: product links, a feedback button and the signed-in user's avatar opening a dropdown menu.
Large header
size="lg" for a taller bar with a logo mark and wordmark, the kind a publication or agency site wants.
Header with an announcement bar
A slim announcement strip above the header for a launch, a sale or an incident notice, with the bar itself unchanged.
Features (6)
Three-column feature grid
Six features with icons in a three-column grid that drops to two and then one as the section narrows.
Four-up features, start-aligned
A tighter four-column grid with a left-aligned header. For the "how it works" band under a hero.
Bento feature grid
Features of unequal weight in a bento layout: one large card, two tall, two small. Built with BentoGrid and Card.
Feature split with image
A single feature explained at length beside a screenshot, with three check-marked points. Alternate the side for the next one.
Feature checklist
A two-column checklist of everything included, for the plan comparison or the "what you get" band.
Features in tabs
One feature area per tab, each with copy and an image. Arrow keys move between tabs; the panel is announced.
Pricing (6)
Three-tier pricing
Three plans with the middle one highlighted and badged. The columns stack on narrow screens.
Two-tier pricing
Free and paid, side by side, with a note under the grid. Two columns are easier to choose between than three.
Pricing with a billing toggle
A monthly / yearly switch above the plans. The prices are computed from one number each, so the copy cannot drift.
Plan comparison table
A feature-by-plan matrix in a real table with a caption, header cells and a sticky header, for the page under the cards.
Single-plan pricing
One price, one card, one button. For products that refuse to have tiers and want to say so.
Pricing with its FAQ
The plans and the questions they raise on one screen, the FAQ in two columns beneath.
Testimonials (5)
Testimonial grid
Three quotes with names and roles in a grid. Avatars are optional; initials render when there is no photo.
Single large quote
One quote given the whole width, in a large type size with the author beneath. For the one customer who said it best.
Scrolling testimonials
Quote cards in a marquee that pauses on hover and stops under prefers-reduced-motion. Good for a long list nobody would scroll.
Testimonials with a logo cloud
Quotes above, the companies behind them below. The logo strip closes the section with breadth after the depth.
Two-column testimonials
A start-aligned header in one column and the quotes stacked in the other, for a quieter, editorial feel.
CTAs (6)
Primary call-to-action band
A full-bleed band in the brand colour with two buttons. The palette is re-pointed so the outline button stays legible.
Inset call-to-action card
The same call to action as a rounded card inside the container, which sits better between two white sections.
Split call to action
Copy on the start edge, actions on the end edge, on one line once there is room. For the foot of a long page.
Newsletter call to action
An email capture with the inline layout, a note about frequency, and the success and error states already handled.
App download call to action
An inset card with the phone beside the copy and the two store buttons, for the bottom of a mobile product page.
Quiet call to action
A muted inset card with a single link-style action, for pages where a loud band would be out of place.
FAQs (5)
Stacked FAQ
Questions in one column with the first open. Each item is a native details element, so it works before JavaScript.
Two-column FAQ
The same questions in two columns once the section is wide enough, so six answers fit above the fold.
FAQ with the header beside
layout="side" puts the header in a narrow column with the questions beside it — an editorial layout for a support page.
FAQ with a contact card
Questions above, and a card beneath for the one that was not answered, with a button to reach a person.
FAQ by category
Two FAQ blocks under one header, grouped by topic, each its own details group so one open answer per group.
Stats (4)
Stats band
Four numbers in a row on a muted band. The values are strings, so units and formatting are yours.
Stats with a heading
A header above the figures, so the numbers answer a stated question rather than floating on their own.
Stats in cards
Each figure in its own outlined card with a trend line of text beneath it — the dashboard KPI row, on a marketing page.
Stats on the brand colour
The figures on a primary band, palette re-pointed so the numbers and labels stay legible.
Forms (4)
Contact form
Name, email, topic and message in labelled fields with help text, and a submit button. Field wires every id and description.
Sign-up card
A centred card with email, password and a consent checkbox. The password field shows and hides itself.
Inline newsletter form
The one-line email capture for a footer or a sidebar: field and button on one row, note beneath.
Settings rows
Preference rows with a label, a description and a switch on the end edge — the shape of every settings page.