Navbar Simple Links
Logo, inline links and a single call to action. The dependable default.
Navbarsimplemarketing
Component library
Every section previews in a sandboxed iframe using your current theme. Change a token in the theme editor and all of them follow immediately.
Navbar Mobile Drawer
Full-width bar that collapses into an animated slide-down drawer on mobile.
NavbarInteractivemobileinteractive1
Navbar Centered Logo
Symmetrical layout with links split either side of a centered wordmark.
Navbarcenterededitorial1
Navbar With Search
App-style header with an inline search field and icon actions.
Navbarappsearch
Navbar Mega Menu
Hoverable trigger that opens a full-width panel of grouped links.
NavbarInteractivemega-menuinteractive2
Navbar Floating Pill
Detached rounded bar that floats over the page with a soft shadow.
Navbarfloatingpill
Navbar Split Actions
Two-tier bar with a utility strip above and primary navigation below.
Navbartwo-tierutility1
Navbar Announcement Stack
Dismissible announcement bar stacked above a standard navigation row.
NavbarInteractiveannouncementinteractive
Navbar Account Menu
Product header with a workspace switcher and an expandable account dropdown.
NavbarInteractiveappinteractive
Navbar Underline Tabs
Section navigation with a sliding underline that tracks the active tab.
NavbarInteractivetabsinteractive
Hero Centered CTA
Eyebrow pill, oversized headline and a pair of buttons, all centered.
Herocenteredsaas1
Hero Split Image
Copy on the left, a full-bleed product photograph on the right.
Herosplitimage
Hero Gradient Spotlight
Dark-leaning hero with a radial spotlight and gradient headline treatment.
Herogradientdramatic
Hero App Screenshot
Centered copy above a perspective-tilted product screenshot in a browser frame.
Heroscreenshotproduct
Hero Left Aligned
Editorial left-aligned hero with a rule, generous measure and social proof row.
Heroeditorialleft
Hero Video Background
Full-bleed image backdrop with a scrim overlay and centered copy.
Herofullscreenoverlay
Hero Stats Inline
Headline and CTA over a three-column statistics strip.
Herostatsproof
Hero Newsletter Capture
Compact hero built around a single email field and subscriber proof.
Heronewsletteremail
Hero Code Preview
Developer hero pairing copy with a faux terminal and copyable install line.
HeroInteractivedevelopercode
Hero Bento Grid
Headline above an asymmetric bento grid of feature tiles.
Herobentogrid
Hero Angled Split
Two-tone diagonal split with copy on a solid panel and imagery behind it.
Heroangledsplit
Hero Logo Proof
Centered hero that closes with a customer logo strip instead of a second CTA.
Herosocial-prooflogos
Features Icon Grid
Three-column grid of icon, title and supporting sentence.
Featuresgridicons
Features Alternating Rows
Image and copy swapping sides down the page, one feature per row.
Featuresalternatingimages
Features Tabbed Panels
Vertical tab list that swaps the panel beside it. Uses local state.
FeaturesInteractivetabsinteractive
Features Comparison Table
Row-by-row comparison against the status quo, with a scroll container.
Featurescomparisontable
Features Numbered Steps
A connected three-step process laid out horizontally.
Featuresstepsprocess
Features Split Sticky
Sticky heading column beside a scrolling list of detailed features.
Featuresstickysplit
Features Card Hover
Bordered cards that lift and reveal a link on hover.
Featurescardshover
Features Centered Highlight
One hero feature on a filled panel with three supporting points beneath.
Featureshighlightcentered
Pricing Three Tiers
Classic three-card layout with the middle plan emphasised.
Pricingtierscards
Pricing Monthly Toggle
Two plans with a monthly/annual switch that recalculates the price.
PricingInteractivetoggleinteractive
Pricing Single Plan
One product, one price, split between the pitch and the payment panel.
Pricingsinglesplit
Pricing Feature Matrix
Wide comparison table with plans as columns and a sticky header row.
Pricingmatrixtable
Pricing Usage Slider
Range input that estimates a monthly bill from projected volume.
PricingInteractivecalculatorinteractive
Pricing Compact List
Dense stacked rows for catalogues with many plans.
Pricingcompactlist
Pricing Contact Enterprise
Self-serve tiers paired with a full-width enterprise contact panel.
Pricingenterprisecontact
FAQ Accordion Simple
Single-open accordion with a rotating chevron. The workhorse.
FAQInteractiveaccordioninteractive
FAQ Two Column
Always-open question and answer pairs in a two-column grid.
FAQgridstatic
FAQ Split Contact
Sticky heading with a contact prompt beside an accordion column.
FAQInteractiveaccordioninteractive
FAQ Categorised Tabs
Topic filter chips above a filtered question list.
FAQInteractivetabsinteractive
FAQ Numbered List
Editorial numbered questions with generous spacing and no toggles.
FAQnumberededitorial
FAQ Searchable
Live text filter across a question list, with an empty state.
FAQInteractivesearchinteractive
Testimonials Card Grid
Three-column grid of quote cards with avatar, name and role.
Testimonialsgridcards
Testimonials Carousel
One quote at a time with previous, next and dot navigation.
TestimonialsInteractivecarouselinteractive
Testimonials Masonry Wall
Dense column-flow wall of short quotes of varying length.
Testimonialsmasonrywall
Testimonials Feature Quote
One large quote beside a portrait, with a result metric underneath.
Testimonialssinglecase-study
Testimonials Logo Quotes
Wordmark above each quote, in a two-column bordered layout.
Testimonialslogosb2b
Testimonials Rating Summary
Aggregate score and distribution bars beside recent reviews.
Testimonialsratingsreviews
CTA Centered Panel
Filled rounded panel with headline, subcopy and two buttons.
CTApanelcentered
CTA Inline Band
Full-width band with copy left and a single action right.
CTAbandinline
CTA Email Capture
Single-field sign-up with inline validation copy and a privacy note.
CTAInteractiveemailform
CTA Split Image
Half copy, half photograph, edge to edge with no rounding.
CTAsplitimage
CTA App Download
Store badges and a QR-style panel for mobile app downloads.
CTAmobiledownload
CTA Dual Offer
Two side-by-side paths for different visitor intents.
CTAdualcards
Footer Four Columns
Brand block plus four link columns and a legal bar.
Footercolumnssitemap
Footer Newsletter
Signup form on the left with three compact link columns beside it.
Footernewsletterform
Footer Minimal Bar
Single row: wordmark, a handful of links, copyright.
Footerminimalsingle-row
Footer Dark Feature
Inverted footer built on the foreground colour with an oversized wordmark.
Footerinvertedbold
Footer With Status
Developer footer carrying a live system status indicator and version badge.
Footerdeveloperstatus
Footer Centered Social
Everything centered: logo, nav, social icons and a fine-print line.
Footercenteredsocial
Footer Sitemap Wide
Six-column sitemap for content-heavy sites, with a locale selector.
Footersitemapwide
Footer Contact Details
Address, phone and opening hours beside a compact link list.
Footercontactlocal
Footer Accordion Mobile
Link groups that collapse into accordions on small screens.
FooterInteractiveaccordioninteractive
Stats Simple Row
Four metrics in a clean row with labels beneath.
Statsrowsimple
Stats Card Trend
KPI cards carrying a delta badge and a sparkline-style bar row.
Statscardstrend
Stats Split Narrative
Explanatory copy on one side, a stacked list of metrics on the other.
Statssplitnarrative
Stats Bordered Grid
Metrics in a hairline-separated grid on a filled panel.
Statsgridbordered
Logo Cloud Simple
A single centered row of wordmarks under a short line of copy.
Logo Cloudrowsimple
Logo Cloud Bordered Grid
Wordmarks in hairline-separated cells, with a closing case-study link.
Logo Cloudgridbordered
Logo Cloud Marquee
Continuously scrolling wordmark strip with edge fades.
Logo Cloudmarqueeanimated
Team Portrait Grid
Four-column portrait grid with name, role and social link.
Teamgridportraits
Team Leadership Rows
Wide rows pairing a portrait with a paragraph-length biography.
Teamrowsbios
Team Hiring Callout
Compact team avatars beside an open-roles panel.
Teamhiringcareers
Contact Split Form
Contact details beside a full enquiry form with a topic selector.
Contactformsplit
Contact Support Routes
Cards that route different visitor intents to the right channel.
Contactroutingcards
Contact Map Panel
Location image beside opening hours and a short form.
Contactmaplocation
Blog Card Grid
Three-column article cards with cover image, tag and author row.
Bloggridcards
Blog Featured Split
One large lead article beside a stacked list of recent posts.
Blogfeaturedsplit
Blog List Compact
Dense dated index grouped by year, no images.
Bloglistcompact
Auth Sign In Centered
Centered card with social providers, a divider and a password toggle.
Auth FormsInteractivesign-ininteractive
Auth Sign Up Split
Registration form beside a testimonial panel with a benefits list.
Auth Formssign-upsplit
Auth Reset Password
Two-state recovery flow that swaps to a confirmation panel on submit.
Auth FormsInteractiverecoveryinteractive
Banner Announcement Bar
Slim dismissible bar with a single inline link.
BannersInteractiveannouncementinteractive
Banner Cookie Consent
Floating consent card with accept, reject and preferences actions.
BannersInteractivecookiesconsent1
Banner Inline Alerts
Four inline alert variants distinguished by token, icon and weight.
Bannersalertsstatus
Steps Numbered Row
Three numbered steps in a row, joined by a connecting rule.
Stepsnumberedrow1
Steps Vertical Timeline
Left-rail timeline with icon markers and a per-step duration.
Stepstimelinevertical
Steps Onboarding Checklist
Tickable setup checklist with a live progress bar.
StepsInteractivechecklistinteractive1
Steps Roadmap Quarters
Quarterly roadmap columns with shipped, building and planned states.
Stepsroadmapquarters
Gallery Masonry Grid
Column-flow masonry layout with captions revealed on hover.
Gallerymasonrygrid2
Gallery Filter Tabs
Category pills that filter the grid in place.
GalleryInteractivefilterinteractive
Gallery Before After
Draggable split comparison driven by a range input.
GalleryInteractivecomparisoninteractive
Gallery Video Feature
Large poster frame with a play affordance and a chapter list.
GalleryInteractivevideofeature
Newsletter Inline Bar
Single-line subscribe form with an inline success state.
NewsletterInteractiveinlineform
Newsletter Split Card
Two-column card pairing the pitch with the form and past issues.
NewsletterInteractivesplitcard
Newsletter Waitlist Count
Waitlist form backed by stacked avatars and a live signup count.
NewsletterInteractivewaitlistavatars
Newsletter Footer Panel
Full-bleed primary panel sized to sit above a footer.
Newsletterfooterpanel
Careers Open Roles
Roles grouped by team, filterable by location.
CareersInteractiverolesjobs
Careers Perks Grid
Benefits grid with icons and a plain-spoken line each.
Careersperksbenefits
Careers Hiring Process
Interview stages with durations and who you will meet.
Careersprocesshiring
Careers Culture Split
Photo-and-copy split with the values stated as commitments.
Careersculturesplit
Portfolio Project Grid
Three-up project cards with client, discipline and year.
Portfolioprojectsgrid
Portfolio Case Study Highlight
One case study told across problem, approach and result.
Portfoliocase studyhighlight
Portfolio Results Metrics
Outcome numbers paired with the method that produced each one.
Portfolioresultsmetrics
Portfolio Client Quote
Full-width client quote anchored to a project and its numbers.
Portfolioquoteclient
Comparison Feature Matrix
Plan matrix with ticks, dashes and a highlighted column.
Comparisonmatrixtable
Comparison Us Versus Them
Two stacked columns contrasting the old way with the new one.
Comparisonalternativescontrast
Comparison Plan Switcher
Mobile-friendly comparison that swaps one plan column at a time.
ComparisonInteractiveinteractiveswitcher1
Comparison Spec Table
Two-product specification table grouped into labelled sections.
Comparisonspecstable