Block library
253 blocks · heart to nudge Jev, lock to use exactly0 hearted · 0 locked
ann-bar
Full-width solid accent bar above the page with one announcement and a link.ann-pill
Small pill-shaped announcement badge centred above the navigation; subtle and friendly.ann-outline
Outlined announcement strip with hairline borders; understated, editorial, formal.ann-marquee
Scrolling ticker of repeated announcement text; loud, retro, sales, events, streetwear.ann-glow
Small pill badge with a soft glowing dot, centred above the navigation; modern SaaS launch pages.ann-sticky
Full-width bar that stays pinned to the top of the screen as the page scrolls; persistent promos and sales.nav-simple
Simple top bar with brand on the left, links and a button on the right; safe default for any site.nav-centered
Top bar with links centred between the brand and a button; balanced, editorial, minimal.nav-pill
Floating rounded pill navigation detached from the page edge; modern, playful, startup.nav-boxed
Bordered box navigation with hard edges and shadow; brutalist, retro, bold.nav-underline
Navigation with a full-width rule and underlined active link; print, editorial, formal.nav-split
Links on the left, brand in the middle, button on the right; boutique, fashion, hospitality.nav-stacked
Brand centred on its own row with links underneath; magazine, luxury, heritage brands.nav-minimal
Ultra minimal bar with brand, the word Menu and one button; portfolios, studios, launch pages.nav-dock-icons
A macOS-style floating dock of icon links that lift on hover; playful, creative, desktop apps and tools.nav-menu
A first link plus a 'More' dropdown that reveals the rest of the pages with a short description each; sites with several pages, docs-style products.nav-clear
Transparent bar that floats over the top of the hero with light links and no border; photographic, cinematic and image-led launches.nav-fullscreen
Brand and a Menu button that opens a full-screen overlay of huge links; portfolios, studios, fashion, art and offbeat creative sites.nav-drawer
Brand with a hamburger that slides a side drawer in from the right with the links and button; apps, products, shops and mobile-first sites.nav-mega
Top bar with the main links and an Explore dropdown panel listing every page; content-rich sites, magazines, shops and organisations.nav-rail
A slim vertical rail fixed to the left edge with the brand and links set sideways; editorial, architecture, art and distinctive portfolios.nav-dock
A floating dock at the bottom centre of the screen holding the brand and links, like a phone app; playful, consumer and portfolio sites.nav-brutal
Off-beat sticker navigation: a tilted brand tag and links as hard-shadowed labels at playful angles; brutalist, youth, music and streetwear.nav-double
Two rows: brand and button on top, links on a full-width colour band beneath; institutions, shops, events and confident brands.hero-split
Headline and button on the left with a large illustration on the right; the classic product launch hero.hero-split-reverse
Large illustration on the left with headline and button on the right; a fresher take on the split hero.hero-centered
Centred headline, subheading and button with no illustration; announcements, newsletters, simple products.hero-centered-viz
Centred headline and button followed by a wide illustration below; app launches and showing a product.hero-minimal
Understated left-aligned headline with short text and no imagery; portfolios, writers, studios, personal sites.hero-gradient
Bold centred hero on a glowing gradient background with large type; startups, AI products, events.hero-giant-type
Gigantic headline type filling the width with a small subline; brutalist, poster-like, fashion, agencies.hero-stats
Headline and button with three proof numbers beneath and an illustration; established products with traction.hero-email
Centred headline with an email sign-up field and button; waitlists, newsletters, pre-launch pages.hero-framed
Content and illustration inside one thick bordered box; retro, brutalist, sticker, playful brands.hero-band
Full-bleed solid accent colour band with inverted text; loud campaigns, sales, events, sports.hero-stacked-cards
Headline on the left with a stack of tilted cards on the right; creative, community, merch, youth brands.hero-editorial
Magazine-style hero with a masthead line, rules and a large serif headline; publishing, culture, fashion.hero-terminal
Headline next to a code terminal window; developer tools, CLIs, APIs, infrastructure.hero-launch
Centred hero with a small pill badge above a huge gradient headline, and a glowing browser mockup below; the classic modern SaaS launch-page look.hero-meteor
Headline and button over a dark field of streaking diagonal light trails; AI products, developer tools, futuristic and night-mode brands.hero-aurora
Centred hero with a spinning circular badge, a shifting multi-colour gradient headline, floating particles and a shimmering button; playful, creative, colourful launch pages.hero-slider
Full-width slider of three bold colour slides, each with its own headline, that scrolls or slides on its own; launches, campaigns, shops and brands with several things to say.hero-scatter
Off-beat hero: the headline in the middle with pictures scattered around the edges at odd angles and sizes, drifting as you scroll; creative studios, photographers, fashion and culture.hero-geometric
Headline beside a bold composition of circles, arcs, triangles and lines in the design's colours; Bauhaus, modernist, architecture, design and tech brands that like geometry.hero-collage
Headline beside an overlapping stack of three tilted pictures like prints on a table; photographers, makers, food, travel and lifestyle brands.hero-mesh
Centred hero floating on a soft gradient mesh blended from the design's colours; AI, wellness, apps, events and any modern premium product.hero-ticker
Giant outlined headline scrolling across the page as a ticker with the supporting text below; loud, poster-like, music, sport, fashion and event brands.hero-video
Full-bleed hero with a looping muted video behind the headline and a dark scrim for reading; films, venues, sport, travel, restaurants, launches and any brand with strong footage.shapes-bauhaus
A row of bold Bauhaus primitives (circle, half circle, square, triangle, quarter, ring) in the design's colours; a playful geometric divider for modern, art and design brands.shapes-lines
Blueprint band of fine grid lines, dimension marks and crosshair circles; engineering, architecture, tech, planning and technical brands.shapes-halftone
A wave of halftone dots that swell and shrink across the band; retro, print, music, comic and playful brands.shapes-topo
Flowing topographic contour lines across the band; maps, outdoors, nature, science, data and calm organic brands.shapes-memphis
Memphis confetti of squiggles, triangles, dots and plus signs scattered across the band; 80s-90s, youthful, fun, food and party brands.shapes-cut
A diagonally cut colour band with a big phrase across it and a few geometric marks; punchy section break for campaigns, sport, events and confident brands.video-feature
One large video player in a framed 16:9 box with a heading and a caption; a showreel, product film, trailer, tour or announcement.video-reels
A strip of tall portrait videos, like Reels or TikTok, that play silently as they scroll into view and take sound on tap; creators, food, fashion, events, real estate and social-first brands.video-wall
A wall of video thumbnails with play buttons that open in a full-screen viewer; portfolios, courses, talks, channels and libraries of clips.video-spotlight
One big video thumbnail with a centred play button that opens the video full-screen with sound; product demos and explainer videos on a SaaS landing page.logos-strip
Single row of customer or partner names in muted uppercase; unobtrusive social proof.logos-boxed
Company names in bordered boxes forming a grid; structured, corporate, technical.logos-marquee
Endlessly scrolling row of company names; busy, energetic, many customers.logos-caption
Caption on the left and company names on the right; editorial and balanced.logos-badges
Company names as rounded badges; friendly, community, consumer brands.logos-glow
Centred caption and logo row over a soft ambient glow; modern SaaS launch pages.stats-cards
Row of KPI cards with a label and big number; dashboards, analytics, overview screens.stats-strip
Compact strip of key numbers separated by rules; marketing pages showing traction.stats-bigtype
Enormous numerals with small captions; bold brands, campaigns, annual reports.stats-divided
Numbers in columns split by vertical lines; editorial, financial, formal.stats-badges
Numbers inside rounded badges; friendly, consumer, playful.stats-bars
Each figure with a progress bar underneath; goals, funding, usage, completion.stats-glow
A small label above each huge glowing gradient number; modern SaaS launch pages.stats-ring
Each figure inside an animated circular progress ring; goals, completion, health, capacity.features-grid
Three-column grid of feature cards, each with a title and short description; the general-purpose default.features-list
Vertical stack of full-width feature cards; a small number of detailed or technical benefits.features-alternating
Alternating rows pairing an illustration with feature text; walkthroughs and storytelling.features-icons
Four columns each with a small icon, title and text and no card box; clean, airy, product overviews.features-numbered
Large 01, 02, 03 numerals beside each feature; process-like, editorial, structured stories.features-checklist
Two-column checklist with tick marks and short lines; many small benefits, practical services.features-sidebar
Heading pinned on the left with the feature list on the right; documentation-like, calm, serious.features-tall
Tall cards with an accent band and icon on top; bold, friendly, mobile-first products.features-divided
Columns separated by thin vertical rules with no boxes; refined, financial, minimal.features-wide
Full-width rows with the title in large type on the left and text on the right; confident, editorial, agencies.features-pills
Compact pill badges with an icon and short label; many quick capabilities, tools, integrations.features-2x2
Two-by-two grid of large cards with icon badges; a few headline capabilities, balanced.features-glow
Four columns of icons in a soft glowing badge, no card box; clean modern SaaS launch pages.features-magic
Cards with a soft pulsing spotlight glow; modern, animated, playful SaaS products.features-tilt
Cards that tilt in 3D and lift on hover; playful, tactile, modern consumer products.features-beam
A diagram of connected nodes with animated light travelling along the lines into a central hub; integrations, connectivity, platforms.features-tabs
Tabbed panel: a row of tab titles with the matching text and a large illustration below, switching without scripts; several offers, services or steps in one compact block.steps-row
Horizontal row of numbered steps with connecting line; simple linear processes.steps-vertical
Vertical timeline of steps with a line down the side; onboarding, tutorials, longer processes.steps-cards
Steps as separate cards with a number badge; friendly, modular, consumer.steps-bignum
Giant outlined numerals with a step title beside each; bold, poster-like, campaigns.steps-zigzag
Steps alternating left and right down a centre line; storytelling, journeys, travel.steps-checklist
Steps as a checklist of ticked items; getting-started guides, setup, requirements.steps-trace
Vertical steps whose connecting line draws itself in as you scroll past; onboarding, tutorials, documentation.bento-mosaic
Asymmetric mosaic of feature tiles with one large tile; modern product overview with many features.bento-lead
One large tile on the left and four small tiles on the right; a hero feature plus supporting ones.bento-stripes
Wide horizontal tiles stacked in alternating widths; editorial and calm.bento-visuals
Every tile carries its own illustration; visual products, design tools, creative platforms.bento-stack
Tiles stacked in two staggered columns; content-rich pages, lifestyle, community.bento-quad
Even two-by-two tile grid with a wide tile beneath; balanced feature summary.bento-glow
Even tile grid where the lead tile is lifted and wrapped in a soft glow; modern SaaS launch pages.bento-devtools
Developer-flavoured tile grid with a live code diff, a file tree and a terminal; SDKs, APIs, dev tooling.bento-beams
Tile grid over an animated grid background with a travelling light beam; futuristic, technical, infrastructure products.bento-lamp
A cone of light drops from the top of a dark section, lighting the heading, with feature tiles beneath; premium, dramatic AI and product launches.bento-parallax
Tile grid over a faint grid backdrop that drifts at its own pace as you scroll; spacious, premium, modern product pages.show-browser
Copy on the left and a browser window mockup on the right; showing a web product working.show-phone
Phone mockup on the left with copy on the right; mobile apps and consumer products.show-dashboard
Copy beside an analytics dashboard mockup; business software, reporting, admin tools.show-terminal
Terminal window beside copy; developer tools, APIs, CLIs and infrastructure demos.show-polaroids
Scattered photo prints beside copy; travel, lifestyle, community and photography.show-duo
Two illustrations side by side under a heading; comparing views or showing web and mobile together.gallery-grid
Even grid of equal square photos with a heading; portfolios, products, venues, simple showcases of the user's own images.gallery-mosaic
Masonry mosaic where photos keep their own proportions and columns interlock; photographers, artists, editorial and lifestyle imagery.gallery-strip
One horizontal strip of large photos to scroll sideways; cinematic, travel, events and image-led brands.gallery-framed
Photos in bordered frames with a slight tilt; playful, retro, craft, sticker and scrapbook looks.gallery-masonry
Pinterest-style masonry: tall and wide pictures fall into interlocking columns, each with its caption appearing on hover; inspiration boards, portfolios, food, fashion, interiors and any image-heavy site.gallery-justified
Justified rows: every row is filled edge to edge and pictures keep their proportions, like a photo-sharing site; photographers, travel, events and reportage.gallery-bento
Bento gallery: wide pictures span two columns and tall ones two rows in a tight dense grid; product shots, editorial spreads, agencies and designers.gallery-carousel
A carousel of large pictures with previous and next buttons and gentle autoplay, opening in a viewer on click; hero portfolios, venues, real estate and showcases with a few standout photos.gallery-scatter
Offbeat scatter: pictures of different sizes sit at odd angles and offsets like prints tossed on a table, still in tidy rows underneath; creative studios, photographers, fashion, art and music.gallery-filter
Gallery with category filter buttons (All plus three) that show only that group's pictures, no scripts; portfolios with several kinds of work, agencies, photographers and shops.slider-testimonials
Carousel of customer quotes on wide cards with the author beneath; social proof for services, products and studios.slider-cards
Row of tall numbered cards to swipe through with big headings; process, benefits, services or offers that deserve space.slider-quotefade
One huge quote at a time in giant type that slides on its own; brand statements, press quotes, manifestos and events.slider-products
Carousel of product or item cards with a picture, a name and a short line; shops, menus, listings, collections and portfolios of things.stories-rings
A row of round story highlights with a colourful ring, each opening a full-screen story viewer with progress bars and tap-to-advance, like Instagram; brands, creators, restaurants, events and portfolios.stories-phone
A tall portrait card of the first story with a play button and the other highlights as small rings beneath, opening the story viewer; mobile-first brands, food, fashion, events and creators.projects-grid
Grid of project cards, each a picture with the name and kind of work beneath and a lift on hover; the clear default for a portfolio's work.projects-list
Big typographic list of projects with an index number, the name in large type and the kind of work on the right, a picture revealing on hover; editorial, agencies, architecture and design studios.projects-cover
Large cover images alternating with the project's name and kind of work at the side, one after another; photographers, film, art direction and case-study led portfolios.case-hero
Case-study opening: the project's name in large type, a short summary, a row of facts (client, year, role, tools) and a wide cover picture; the top of a project page.case-story
Three numbered columns telling the challenge, the approach and the result of a project; the story part of a case study.case-images
Stack of large project pictures, some full width and some in pairs, with a short caption, opening in the viewer; the visual body of a case study.case-next
A big closing link to the next project or back to all work with the project's name in giant type; keeps visitors moving through a portfolio.testimonials-cards
Three customer quote cards with names; the standard trust builder.testimonials-big
One giant centred quote with attribution; a single powerful endorsement.testimonials-wall
Dense wall of short quotes in staggered columns; many happy customers, community products.testimonials-list
Quotes as a clean vertical list with avatars and rules between; calm, editorial.testimonials-boxed
One quote inside a thick bordered box with an oversized quotation mark; retro, bold, sticker looks.testimonials-bubbles
Quotes as chat bubbles; conversational, social, messaging and community products.testimonials-marquee
Continuously scrolling row of quote cards; lively, high volume of reviews.testimonials-split
Heading on the left and stacked quotes on the right; balanced and formal.testimonials-glow
One centred quote card lifted and wrapped in a soft glow; modern SaaS launch pages.testimonials-stack
A stack of quote cards peeking behind the front one; compact, tactile social proof.testimonials-auto
Quotes that fade through one another on a loop in the same spot; compact, always-fresh social proof.pricing-tiers
Three plan cards with the middle one highlighted; standard free, pro and scale pricing.pricing-two
Two large plan cards side by side; simple choice such as free versus paid.pricing-toggle
Monthly and yearly toggle above three plans; subscription software with annual discount.pricing-single
One dominant plan card centred with a long feature list; a single product with one price.pricing-rows
Plans as horizontal rows with the price on the right; enterprise, service and agency pricing.pricing-outline
Outlined plan cards without fills and a solid highlighted centre; minimal and technical.pricing-compare
Comparison table of plans against features; many features across tiers.pricing-cards-tall
Tall plan cards with a coloured header band; friendly consumer subscriptions.pricing-glow
Plain plan cards with the recommended one lifted, wrapped in a soft glow and an animated rotating border; modern SaaS launch pages.pricing-glare
Plan cards with a diagonal light glare that sweeps across on hover; polished, tactile, modern SaaS.cmp-table
Two-column table comparing us with the alternative; considered B2B purchases.cmp-matrix
Feature matrix with ticks and crosses; competitive product pages.cmp-versus
Two large cards labelled before and after; transformation stories.cmp-cards
Points as small cards each with a verdict; lightweight, friendly comparisons.cmp-glow
Two cards labelled before and after, the after card lifted with a soft glow; modern SaaS launch pages.faq-list
Frequently asked questions as expandable rows; reduces objections and explains policies.faq-two-col
Questions and answers laid out in two columns; many questions, technical products.faq-cards
Each question as its own always-open card; friendly and quick to scan.faq-numbered
Numbered questions with large numerals; structured, editorial and formal.faq-sidebar
Heading and a contact line on the left with expandable answers on the right; support-oriented.team-grid
Grid of people cards with initials avatars, names and roles; small teams and studios.team-list
Simple list of names and roles separated by rules; quiet, editorial, professional firms.team-circles
Large round avatars with names beneath; warm, community and creative teams.team-cards-wide
Wide horizontal cards with avatar, name and role; agencies and consultancies.team-avatars
Overlapping avatar stack with a headline and a plus-more badge; compact social proof of a whole team or userbase.team-tooltip
A row of avatars that reveal the person's name and role in a tooltip on hover; compact, tidy team credits.timeline-vertical
Vertical timeline with dated milestones; company history and roadmaps.timeline-horizontal
Horizontal row of dated milestones on a line; short histories and launch plans.timeline-cards
Milestones as dated cards in a grid; achievements and releases.timeline-roadmap
Roadmap grouped as now, next and later columns; product roadmaps and plans.timeline-arc
Milestones plotted along a gentle curved arc; modern, distinctive company-history sections.cta-banner
Full-width accent banner with a closing headline and a button; the standard final conversion prompt.cta-inline
Small inline call-to-action line with a link; low-pressure prompts for docs or newsletters.cta-boxed
Call to action inside a bordered rounded box; contained, modern, product pages.cta-split
Headline on the left and the button on the right in one row; compact, confident.cta-giant
Gigantic centred closing headline with one button; bold brands, agencies, campaigns.cta-email
Closing headline with an email capture field and button; waitlists and newsletters.cta-sticker
Tilted sticker-style badge with headline and button; playful, retro, youth and merch brands.cta-visual
Headline and button beside an illustration; product-led closing section.cta-glow
Centred closing headline and button over a soft glowing gradient; modern SaaS launch pages.cta-neon
Closing headline in a card with an animated neon rainbow border and button; vibrant creative and gaming brands.cta-retro
Closing headline over an animated glowing perspective grid floor; synthwave, gaming, nightlife, nostalgic tech brands.cta-sparkle
Closing headline with small twinkling sparkles around it; playful, creative, delightful consumer products.cta-highlight
Closing headline with its final word underlined by an animated marker swipe; confident, modern product pages.cta-rotate
A fixed lead-in phrase with a rotating benefit word above the closing headline; dynamic, energetic product launches.newsletter-inline
Headline on the left and an email field on the right in one row; unobtrusive.newsletter-card
Centred card with headline and email field; classic newsletter sign-up.newsletter-band
Full-width coloured band with a centred sign-up; strong, campaign-like.newsletter-minimal
One line of text with a bare email field and arrow; understated, writers and studios.newsletter-glow
Centred headline and email field over a soft glowing gradient; modern SaaS launch pages.form-contact
Single centred contact form with name, email and message; simple contact pages.contact-split
Contact details on the left and a form on the right; businesses and studios.contact-minimal
Just an email address in large type with a short line; personal sites and studios.contact-cards
Three contact-method cards above a compact form; support-heavy businesses.footer-columns
Footer with brand, tagline and page links; sites with several pages.footer-minimal
Single-line minimal footer with brand and tagline; understated pages.footer-bigbrand
Enormous brand name across the bottom with small links above; bold, agencies, fashion.footer-centered
Centred stack of brand, links and tagline; simple, friendly, portfolios.footer-boxed
Footer inside a bordered box with brand and links; brutalist, retro, contained layouts.footer-newsletter
Footer with an email sign-up beside brand and links; content and community sites.footer-sitemap
Multi-column sitemap footer with several groups of links; larger sites and shops.footer-band
Full-width accent-coloured band footer with inverted text; loud brands and events.posts-grid
Grid of blog post cards with titles and summaries; blogs, news and changelogs.posts-list
Vertical list of posts with dates and titles separated by rules; writing-focused sites.posts-featured
One large featured post on top of smaller ones; editorial and magazine layouts.posts-cards-meta
Post cards with a category pill and read time; content-heavy blogs.posts-magazine
Magazine layout with numbered headline list beside a lead story; news and culture.menu-list
A single-column menu with dotted leaders between each dish and its price; classic, calm, a bistro or wine bar.menu-columns
Two columns of dishes under a heading, prices right-aligned; a full menu at a glance, trattorias and cafés.menu-cards
Dishes as picture cards in a grid with the price as a badge; modern, casual, street food and brunch spots.hours-split
Opening hours on the left and the address with a map placeholder on the right; restaurants, shops, clinics, studios.hours-strip
A slim band with the address, the hours and a directions button in one row; compact, sits above the footer.services-rows
Each service as a full-width row with a large name on the left and a sentence on the right, ruled lines between; editorial, studios and agencies.services-grid
Three service cards with a number and a short description; clinics, salons, trades, consultancies.services-list
A narrow list of services with a price or duration hint beside each; salons, therapists, tutors, repairs.story-split
A large picture beside a few paragraphs of story with a pull-quote; restaurants, makers, family businesses, studios.story-band
A full-width band of story text in large type on the brand colour, no picture; confident, a manifesto, a line to remember.story-quote
The story as one large pull-quote with a short paragraph underneath, centred; intimate, personal, portfolios and small shops.booking-band
A wide booking band with a heading, quick choice pills and a reserve button; restaurants, salons, studios, tours.booking-card
A centred booking card with a short form feel: choices, a note and one big button; hotels, clinics, classes.auth-card
Centred email and password sign-in card; the standard login page.auth-register
Registration card with name, email and password; sign-up and create-account pages.auth-split
Sign-in form beside a large illustration panel; branded login experiences.auth-minimal
Bare unboxed sign-in fields with no card; minimal, editorial, developer-oriented.auth-boxed
Sign-in inside a thick bordered box with a hard shadow; retro, brutalist, playful.auth-social
Sign-in card with social login buttons above the email fields; consumer apps.table-crud
Full data table with a create button for managing records such as customers, orders, users, invoices.table-compact
Dense compact table with small rows for logs, transactions and audit trails with many rows.table-avatars
Table whose first column shows an avatar and name; people, users, contacts, team members.table-striped
Zebra-striped table with alternating row shading; long reference lists that need easy scanning.table-cards
Records shown as a list of cards instead of a table; mobile-friendly and consumer apps.chart-bars
Panel with a bar chart; comparing values over time, revenue, signups, activity.chart-line
Panel with a rising line chart; trends, growth and performance.chart-waves
Panel with a smooth flowing area chart; continuous metrics like traffic and listening time.chart-mosaic
Panel with a heatmap-style grid; activity calendars, contributions, usage intensity.kanban-columns
Three-column task board with cards; project management, tasks, pipelines.kanban-lanes
Horizontal swim lanes with cards; workflows, support queues, editorial calendars.kanban-compact
Dense board with small cards; many items and high-volume triage.activity-feed
Vertical activity feed with avatars and timestamps; dashboards, audit trails, social products.activity-timeline
Timeline feed with a line and dots; order histories, project logs, deployments.activity-cards
Activity items as small cards in a grid; notifications and highlights.activity-live
Feed items fading in one after another on a loop, like a live notification stream; real-time dashboards, monitoring.form-settings
Single settings form with profile fields and a save button; account and preferences pages.settings-sections
Settings split into titled sections with a description beside each; complex accounts.settings-cards
Settings as separate cards for each area; friendly consumer account pages.settings-tabs
Settings with a row of tabs above one form; tidy grouping of many preferences.