Section Blocks
Composed, drop-in page sections built from the primitives above — from navbar to footer.
Heroes
17Hero
Animated marketing hero over an aurora field.
Hero Split
Asymmetric product hero with a tilting app-window mock, live chart, and floating stats.
Hero Spotlight
Centered hero with a pointer-tracked spotlight over a dot grid and a trusted-by marquee.
Hero Glow
Centered hero with a drifting conic glow and an app screenshot fading into the page.
Hero Editorial
Typography-forward, left-aligned hero with hairline meta rows and a word-by-word reveal.
Hero Terminal
Developer hero with a self-typing terminal window and a copy-to-clipboard install command.
Hero Waitlist
Launch hero over light beams with an accessible email capture (front-end only) and social proof.
Hero Stats
Credibility-forward hero with a band of headline metrics that count up on view.
Hero Rotating
Clean centered hero whose headline swaps a key word on a loop over drifting orbs.
Hero Video
Cinematic hero with a 16:9 media card and an accessible play/pause control (front-end only).
Hero App
Mobile-app landing hero with a tilting phone mock, store buttons, and a star rating.
Hero Marquee
Centered hero floating over rows of huge ghost-text wordmarks scrolling in opposing directions.
Hero Showcase
Split hero with a stacked screen deck that auto-cycles through product views, with dot controls.
Hero Countdown
Launch hero with a hydration-safe live countdown ticking to a target date.
Hero AI
AI-product hero with a prompt composer, suggestion chips, and a simulated reply (front-end only).
Hero Search
Search-led landing hero with a prominent field and popular query chips (front-end only).
Hero Image
Full-bleed gradient-scene hero with a legibility scrim and overlay copy; server-renderable.
Feature sections
12Feature Grid
Titled three-column grid of capabilities.
Feature Cards
Elevated capability cards with a gradient hover ring and staggered scroll reveal.
Feature Spotlight
Alternating feature rows pairing copy and a checklist with branded mock visuals.
Feature Tabs
Interactive tabbed feature tour with autoplay, progress, and full keyboard navigation.
Feature Sticky Split
A sticky intro and CTA beside a scroll-revealed list of features.
Feature Highlights
Understated hairline-divider grid of capabilities — server-safe, pure CSS hover.
Feature Media Cards
Feature cards each topped with a branded mock visual and a staggered scroll reveal.
Feature Carousel
Accessible scroll-snap pager of feature cards with bound-aware prev/next controls.
Feature Marquee
Two opposing rows of capability pills that drift on a loop and pause on hover.
Feature Accordion
Icon-led disclosure accordion that expands one capability at a time, inline.
Feature Panels
Interactive panels that expand on hover, focus, or tap to reveal each feature.
Feature Checklist
Server-safe 'everything included' section of grouped checkmark columns.
Bento grids
14Bento Grid
Editorial asymmetric grid of spotlight feature cards.
Bento Showcase
Flagship product bento with bespoke per-cell visuals — an orbiting hero, a live bar chart, an avatar stack, and metrics.
Bento Stats
Analytics bento: counting metrics, a drawn sparkline, a radial goal dial, and animated traffic-source bars.
Bento Gallery
Editorial media wall of CSS mesh-gradient tiles with hover-zoom and a caption that resolves on hover or focus.
Bento Interactive
Interaction showcase: a conic gradient border, cursor spotlight, 3D tilt, magnetic CTA, and copy-to-clipboard.
Bento Features
Feature-storytelling bento with bespoke mocks — an automation pipeline, a ⌘K palette, live cursors, and theming.
Bento Product
Product-UI preview: an app-window mock with a drawn chart, a mini kanban board, an activity feed, and a KPI.
Bento Minimal
A quiet, editorial bento with oversized ghost numerals and a single accent — server-safe, pure-CSS hover.
Bento Creative
Portfolio/agency bento: an intro, gradient project tiles with role and year, a skills cloud, and a contact CTA.
Bento Social Proof
Social-proof bento: a featured testimonial, supporting quotes, an aggregate rating, logos, and headline stats.
Bento Developer
Developer/API bento: a copyable code editor, REST endpoints, SDK languages, a latency readout, and webhooks.
Bento Profile
A link-in-bio personal bento: an identity card, outbound link tiles, a now-playing equalizer, and a booking CTA.
Bento Blog
Editorial content bento: a featured cover story, post cards, a topics cloud, a newsletter CTA, and an archive.
Bento Contact
Contact bento: channel tiles, office hours, an abstract CSS map with a pulsing pin, and an email CTA.
Pricing
26Pricing
Three comparable tiers with a highlighted plan.
Pricing — Billing Toggle
Three tiers with a Monthly/Annual switch; prices tween between periods.
Pricing — Usage Calculator
Pay-as-you-grow calculator: drag the slider to price your team by seats.
Pricing — Spotlight
A single conversion-focused plan with a gradient glow and trust signals.
Pricing — Compact Rows
Horizontally stacked plan rows with inline feature chips for dense pages.
Pricing — Plan Selector
An accessible radiogroup of selectable plans with a live summary and CTA.
Pricing — Feature Matrix
Full comparison matrix with per-plan prices, grouped features, and CTAs.
Pricing — Audience Tabs
Switch the whole plan set by audience behind an accessible tablist.
Pricing — Build Your Plan
A base plan plus toggleable add-ons with a live, animated running total.
Pricing — Free vs Pro
A focused two-plan layout contrasting a free tier with a highlighted Pro.
Pricing — Credit Packs
One-time credit packs with bonus credits and an effective per-credit price.
Pricing — Currency Switcher
Three tiers with a currency switcher that converts and tweens prices.
Pricing — Enterprise Band
Self-serve tiers above a full-width Enterprise contact band with a gradient wash.
Pricing — Minimal
Understated hairline-divider pricing with no boxed cards and text-link CTAs.
Pricing — Metered Usage
A transparent metered rate schedule: a base fee plus per-unit tier tables.
Pricing — Highlight Podium
An asymmetric 3-up with an enlarged, gradient-highlighted recommended plan.
Pricing — Tiers & FAQ
Compact tiers above an integrated Pricing FAQ built on the Accordion.
Pricing — Editorial Split
A two-column split: value-prop copy beside a single highlighted price card.
Pricing — Free Trial Band
A conversion-focused trial band with benefit chips, a CTA, and the post-trial price.
Pricing — Pay What You Want
Preset amount chips plus a custom amount input that drive the CTA.
Pricing — Tier Slider
A slider that snaps across named tiers with a swapping, animated detail panel.
Pricing — Compare & Toggle
A comparison matrix with a Monthly/Annual switch that tweens the header prices.
Pricing — Annual Savings
Annual cards with the monthly price struck through and a 'Save $X/yr' badge.
Pricing — Promo Code
Cards plus a promo-code field that discounts every plan with an animated drop.
Pricing — One-Time License
Perpetual one-time license tiers by seat scope, with a year of updates included.
Pricing — Bundle & Save
Individual items combined into a discounted bundle with a 'Save $X' callout.
Steps & flows
19Steps
Numbered how-it-works sequence with a connector line.
Steps Horizontal
Refined horizontal flow with gradient-ringed icon nodes and a connector.
Steps Vertical
Vertical sequence joined by a gradient rail with icon nodes.
Steps Cards
Numbered cards with ghost numerals and chevron connectors that lift on hover.
Steps Alternating
Center-rail timeline whose cards zigzag left and right on desktop.
Steps Progress
Vertical timeline whose gradient rail fills and nodes light up on scroll.
Steps Interactive
Keyboard-accessible tablist walkthrough driving an animated detail panel.
Steps Sticky
Scroll-linked walkthrough: a sticky index tracks the step you're reading.
Steps Accordion
Expandable steps with a proper disclosure pattern; one open at a time.
Steps Carousel
Guided one-at-a-time walkthrough with a progress bar, counter, and arrow keys.
Steps Editorial
Typography-forward sequence with oversized gradient numerals and hairline rules.
Steps Rings
Circular progress rings that sweep from empty to full as they scroll into view.
Steps Roadmap
Horizontal roadmap with milestone nodes and cards alternating above and below the axis.
Steps Checklist
Interactive getting-started checklist with toggleable items and a live progress meter.
Steps Grid
Two-column matrix of steps with gradient numerals and hairline dividers.
Steps Wizard
Guided Back/Continue flow with a numbered stepper and completion checks.
Steps Flow
Compact process diagram of arrow-connected chips resolving into an outcome.
Steps Code
Developer quickstart pairing each step with a copyable terminal snippet.
Steps Tabs
Horizontal tablist of steps with a sliding indicator and content panels.
Page sections
11Logo Cloud
A quiet marquee of customer wordmarks.
Stats Band
Headline metrics that count up on view.
Testimonials
Opposing marquee rows of quote cards.
FAQ
Frequently-asked questions built on the Accordion.
Newsletter
Subscribe form with validation (front-end only).
Comparison Table
Feature matrix comparing plans with a highlighted column.
Timeline
A vertical rail-and-node timeline of milestones.
Banner
Dismissible announcement bar with a CTA.
Team Grid
Responsive grid of team member cards with avatars.
CTA Section
Closing call-to-action over an animated mesh.
Footer
Four-region footer with brand, links, and socials.