Horizon
A two-column opening: headline, subcopy and calls to action beside a product window, with the text column given slightly more room.
Your design language, on real sections.
Curated section layouts styled entirely by your tokens — export any as AI-ready instructions to rebuild them in your own project.
Browse 152 section templates across 15 categories
Every card below is a live preview rendering in your current design language, not a screenshot. Pick a category to narrow the grid, open any section to see it full-width, or add it to a page.
Beacon
A centered opening with an announcement pill, headline, two calls to action and a social-proof row, above a wide dashboard mock.
Aura
An asymmetric showcase: copy and calls to action on the left, a clean app-window mock with a live metric card on the right.
Prism
A centered opening that sits inside its own artwork — five translucent glass panes fan out behind the headline and buttons.
Lattice
A restrained technical opening, left-aligned over a full-width mesh of connected nodes and edges.
Blueprint
A hero where the typography is the illustration, set over a faint drafting grid that fades toward the edges.
Marquee
Type as the image: a mono kicker above an oversized three-line headline set tight enough to read as one block.
Verse
A magazine opening spread with no imagery at all — composition and typographic hierarchy carry the whole section.
Canvas
The picture is the section: a full-bleed photograph fills the hero with the headline and buttons resting near the bottom.
Atrium
An asymmetric corporate split with the copy held to just over half the width and a photograph filling the remainder.
Eclipse
A photo band across the top with a content card pulled up to straddle its lower edge — half on the picture, half on the page.
Drift
A calm lifestyle opening: a narrow centered type block above a staggered trio of photographs at three different crops.
Cameo
A figure-led collage pairing copy on the left with an illustrated cut-out figure staged on the right.
Mural
Centered copy standing on a drawn horizon line that runs full width along the bottom edge.
Signal
A slim page header for utility pages: an eyebrow, one headline and a single line of subcopy, with no persuasive apparatus.
Mosaic
A centered heading above a three-column grid of feature cards, each with an icon tile, a title and a short description.
Bento
An asymmetric bento grid where one flagship cell spans a two-by-two block and five smaller cells fill the rest.
Cascade
A sticky heading on the left beside a divided vertical list of features, each led by an icon tile.
Anatomy
A specimen sheet rather than a feature list: real interface components on a ruled board, each labelled with what it demonstrates.
Contrast
Argues by opposition — each "without a system" row is paired against its "with a system" counterpart across two columns.
Manifest
Breadth as the message: a four-column grid of headed capability groups, each counting what it contains.
Relay
A four-step sequence rather than parallel cells, each step a numbered icon node on a connecting track.
Orbit
Integrations arranged radially around a central hub — the one feature layout that abandons the grid.
Ribbon
Alternating full-width rows, one deep feature per row, in place of a shallow grid of cells.
Flow
A pipeline diagram: three process stages laid out horizontally and joined into one continuous flow.
Callout
Spatial annotation — one product window with numbered pins over it and a legend mapping each number to a feature.
Console
One continuous control surface: copy on the left beside a single settings panel that shows the product doing its job.
Ledger
Three plan cards side by side, with the recommended tier lifted by a coloured border, a deeper shadow and a badge.
Tally
A full feature-comparison table: features down the first column, plans across the top, with the popular column tinted.
Vault
A single all-inclusive plan on one wide card — the price and call to action on the left, everything included on the right.
Podium
Three plans on a winner's podium, bottom-aligned so the recommended tier stands physically taller than the others.
Carte
A menu-style price list rather than a card grid — a narrow, hairline-divided run of rows, at home on a service business.
Stack
Plans as full-width horizontal bands instead of vertical cards, each row carrying its name, price and call to action.
Ascent
Tiers as an ascending staircase, each plan sitting on a riser that grows taller as the price does.
Aside
An editorial pitch beside the plans: a sticky heading holds its place on the left while the tiers scroll past.
Sheet
Plans fused into one solid panel rather than separate cards, divided into three columns inside a single frame.
Cadence
Three plan cards above a monthly / annual billing toggle that switches every price in place.
Rally
A centered call to action on a branded panel: heading, subcopy and two buttons on a rounded, elevated surface.
Split
A horizontal call to action — heading and subcopy on the left, a solid and a ghost button on the right.
Beam
A bold centered call to action on a diagonal gradient panel, with the copy and button reversed out of the colour.
Beacon
A big, airy call to action with no panel at all — the copy sits straight on the page between two soft ring marks.
Frame
The call to action inside an outlined frame with no fill, crowned by a short accent bar straddling the top edge.
Prompt
An editorial callout card with a solid accent tab running down its full left edge.
Ticket
The call to action styled as a ticket stub, split by a dashed perforation into a copy body and a tear-off action zone.
Chorus
One featured quote centered in a narrow column — a rating, a large quote and an author line, with the words as the visual.
Echo
A responsive grid of quote cards, each with a star rating, a short quote and an author row.
Anthem
An aside carrying a large aggregate score and review count, beside a vertical stack of compact quote cards.
Roll
Testimonials as an editorial list — a narrow, hairline-divided run of rows, each led by a monogram avatar.
Quilt
A masonry wall of quotes at naturally uneven heights, packed into three columns.
Score
Leads with the number: a row of stars above an oversized aggregate rating, with supporting quotes beneath.
Stream
A wall of love — two rails of quote pills scrolling continuously in opposite directions, with no scripting.
Halo
One hero pull-quote crowned by a rating pill and haloed by a strip of monogram avatars.
Volley
Quotes rallying back and forth across a central vertical rule, alternating sides down the page.
Bubble
Quotes staged as a messaging thread, with speech bubbles alternating between incoming and outgoing sides.
Reel
A one-at-a-time slider inside a framed viewport, showing a single large quote per slide.
Portrait
One featured quote paired with a large swappable portrait photograph alongside it.
Emblem
A single brand-loud pull-quote on a solid primary band, with every word reversed out of the colour.
Register
Quotes as a numbered editorial ledger, each row leading with a large index numeral in a fixed left column.
Clarity
A single-column accordion using native expand and collapse — real open/close behaviour with no scripting.
Compass
A heading and support card on the left beside an accordion of questions on the right.
Index
A two-column grid of open question-and-answer pairs — nothing hidden, everything readable at a glance.
Primer
Questions as a numbered editorial list, each row led by a large index numeral in a fixed left column.
Docket
A two-column grid of accordion cards, each question expanding in place with no scripting.
Digest
Leads with one prominent featured question on a tinted panel, with the rest following in a compact two-column list.
Manual
A help-centre layout: a pill search field above a clean definition list of questions and answers.
Canon
A spec-sheet definition list — each question held in a fixed left column with its answer set alongside.
Directory
A tabbed FAQ: a vertical list of question tabs on the left switching an answer panel on the right.
Patchwork
A masonry wall of open question-and-answer cards at naturally uneven heights.
Transcript
Questions and answers styled as an interview transcript, each question marked by a round Q badge.
Slate
The whole question set inside one elevated panel, divided into rows rather than separate cards.
Gauge
A row of circular progress rings, each arc drawn to the length its value encodes with the figure centered inside.
Meter
Labelled horizontal progress bars in two columns, each fill widened to match its level.
Pulse
A grid of trend cards, each pairing a big number and an up-trend chip with a small sparkline.
Band
The classic proof strip: one horizontal row of large figures over muted labels, divided by fine vertical rules.
Quad
A grid of elevated stat cards, each holding a large figure above its label.
Spotlight
One hero metric dominates the left while the remaining figures run down a divided supporting column on the right.
Readout
A vertical statement of figures — each large value in a fixed left column with its label alongside, every row ruled.
Pillars
Tall stat cards standing in a row, each capped by a short accent bar above a left-aligned figure and label.
Ribbon
A branded proof band with the figures reversed out of a solid primary panel — the one stats layout on colour.
Column
A column chart of a growing series, with the headline metric called out above the bars.
Donut
A proportion donut paired with a legend, the ring split into three segments that read as shares of a whole.
Area
One large filled area chart under a headline figure and a trend chip.
Atlas
A comprehensive footer: a brand block with social buttons beside a three-column link map, over a legal bottom bar.
Anchor
A minimal centered footer — a wordmark, one wrapping nav row, a divider, then copyright and social buttons.
Bedrock
A brand-statement footer where an outsized wordmark is the visual, above a mission line and contact link.
Keystone
A conversion banner sits above the link map, turning the footer into one last call to action.
Dispatch
A newsletter footer with an email signup on the left and the link columns on the right.
Terrace
A dense sitemap footer — a slim brand header over an even grid of link columns, for "everything, mapped".
Landing
A brand-heavy split: a large wordmark, tagline and social row on the left, the link columns on the right.
Signal
A social-forward centered footer built around a prominent row of circular social buttons.
Footing
The most compact footer: an accent rule above a single wrapping row of wordmark, nav and copyright.
Keel
A fully centered footer with the brand on top, link columns beneath and a centered legal line.
Vantage
A classic bar: logo on the left, inline nav in the middle, a sign-in link and a solid call to action on the right.
Marquee
Two tiers — a tinted utility strip carrying an announcement and quick links, above the main navigation bar.
Helm
A floating pill bar with a full-round edge and a deep shadow, centered so it reads as detached from the page top.
Vista
Logo on the left, the inline nav centered, and a call to action on the right.
Bearing
A balanced split bar: half the links to the left of a centered wordmark, the rest to its right beside the button.
Crest
A stacked magazine header — the wordmark centered on the top row, the nav centered on a second row beneath a divider.
Hatch
A minimalist bar that hides its nav behind a labelled Menu button, showing only the wordmark and one action.
Scout
A bar with search: logo, inline nav, a pill search field and a call to action.
Sextant
A classic bar whose first nav item is a dropdown trigger, marked by a caret, for a products or resources menu.
Onyx
A bold bar on a full primary surface with the button inverted — the one navbar that sits on colour.
Tier
The nav links sit inside a rounded segmented pill in the centre, the active link filled as its own segment.
Rail
App-style underline tabs, the active item carrying a solid underline on the bar's baseline.
Roster
A compact social-proof strip: a small "trusted by" heading above one centered, wrapping row of monochrome logos.
Lattice
A bordered logo grid — four columns of cells sharing fine dividers inside one rounded box.
Cohort
A large aggregate figure on the left completing a headline, beside a three-column cluster of logo cards.
Ticker
A continuous marquee of logos scrolling left beneath a muted eyebrow, with no scripting.
Banner
A single row of logos separated by fine vertical rules — an even, divided proof band.
Panel
The logo wall inside one elevated panel, each mark stacked over its wordmark.
Aside
A split proof block: a heading and supporting line on the left, a three-column grid of logos on the right.
Cards
Each logo on its own elevated card, the whole card shifting to the brand colour on hover.
Inline
The most space-efficient strip: a "trusted by" label sitting inline with a flowing row of logos on one line.
Stack
Two centered rows of logos, the names split evenly across them — tidy when there are more than fit one line.
Ribbon
A tinted proof strip with the eyebrow and logo row set on a soft branded band, apart from the page.
Spotlight
A proof wall with a hero: the first logo featured on a prominent card beside a grid of the rest.
Showcase
A three-column grid of image cards, each a swappable photo slot over a title and caption.
Spotlight
A hierarchy gallery: one large featured item on the left beside a compact list of the rest.
Index
A text-forward, image-free index — each row a numbered entry with a title, caption and meta column.
Mosaic
A masonry wall of image tiles at varied crops, each captioned beneath.
Overlay
Portrait image tiles with the caption set on the photograph itself, over a soft bottom-up scrim.
Ledger
A menu or price-list form with no images — title and caption on the left, a dotted leader, the price on the right.
Placard
A no-image card grid, each card carrying a meta badge, a title and a caption behind a coloured left edge.
Trail
A horizontal step trail, the numbered discs joined by a connector line running straight through them.
Timeline
A vertical timeline threaded by a rail, each step marked by a dot with its title and text alongside.
Blocks
A grid of numbered step cards, each leading with a large index number above its title and text.
Guide
Icon-led steps in a flexible grid, each opening with a line icon in a soft rounded disc.
Rail
A sticky heading on the left beside a numbered vertical list of steps on the right.
Story
A classic zigzag narrative — alternating rows pairing a swappable image with a block of story copy.
Ethos
A two-column manifesto: a sticky heading on the left beside a stack of hairline-divided text blocks.
Feature
An editorial feature — one large hero image spanning the width, with the story following in text columns.
Editorial
A magazine multi-column text layout with no images, each column topped by a short accent rule.
Statement
A type-forward manifesto built on one oversized heading, a lead paragraph and three quiet supporting notes.
Chronicle
A centered vertical timeline with story cards alternating either side of a central spine.
Panel
A tall sticky image on one side holding its place beside a scrolling column of story blocks.
Callout
The story set apart inside a tinted band, the blocks laid out in one flexible row.
Roster
A grid of centered member cards, each with an initials avatar, a name, a role and a short bio.
Portraits
A grid of members, each a swappable portrait photograph above a name, role and short bio.
Lineup
A compact wrapping row of member pills, each pairing a small avatar with a name and role.
Directory
A directory list — avatar, then name and role, then the bio in a wider right column, divided by fine rules.
Lead
A featured lead: the first member gets a large portrait and a longer bio, the rest following beneath a rule.
Profiles
A grid of left-aligned profile cards, each with a round portrait beside the name and role, bio beneath.
Wall
A dense four-up wall of portrait tiles with the name and role set on the photograph itself.
Intro
A sticky heading on the left beside a list of members, each with an initials avatar, role and bio.
Reach
A two-column contact: email, phone, address and hours on the left beside a form card on the right.
Details
A grid of boxed detail tiles, one per channel — email, phone, address and hours — each with its own icon chip.
Message
A form-forward contact block: one card with a name and email row, a message field and a full-width submit.
Card
One centered elevated card holding the whole contact block — details, hours and a call to action together.
Locate
A locate block pairing the contact details with a styled map placeholder marked by a pin.
Invite
A compact invite on a tinted band: heading and subcopy on the left, a call to action and contact rows on the right.
Hours
A visit-focused split with the contact details on the left beside an opening-hours panel on the right.
Signpost
A compact bar of contact points divided by fine rules, each a small label over its value.
What each section type is for
- Hero 15
- The first screen — headline, promise, and primary action.
- Features 12
- Communicate capability — grouped, scannable value props.
- Pricing 10
- Plan comparison with a clear, emphasized recommended tier.
- Call to action 7
- A focused conversion moment on a branded surface.
- Testimonials 14
- Social proof, straight from the people who use it.
- FAQ 12
- Answer the questions that stand between a visitor and a yes.
- Stats 12
- Proof by the numbers — traction, scale, reliability.
- Footer 10
- The closing frame — navigation, brand, and the legal baseline.
- Navbar 12
- The opening frame — brand, navigation, and the primary action.
- Logos 12
- Social proof at a glance — the companies that already trust you.
- Gallery 7
- A visual grid — products, work, dishes or spaces shown at a glance.
- Process 5
- How it works — the steps from first touch to done.
- Content 8
- A story told in alternating text and media — the brand narrative.
- Team 8
- The people behind the work — faces, roles and a line of trust.
- Contact 8
- Where to find you — address, hours and a way to get in touch.