165 components · Webflow
Webflow library
Drag-and-drop sections, ready to build with.
Designed in Webflow, shipped as real components — props, variants, and clean classes. Drop them into any project and make them yours.
In the library
SDF Hero
Dark, full-bleed hero with a display headline, supporting copy, and a card cluster.
SDF Section Intro
Eyebrow, balanced heading, and a supporting lede to open any section.
Pricing
A three-tier pricing grid with a featured plan and a per-tier deliverables footer.
SDF CTA
Call-to-action block with an eyebrow, heading, body, and dual actions.
SDF Contact Modal
Contact card with a two-column form + media panel and a "prefer a call" footer.
SDF Footer
Multi-column footer with link groups, brand wordmark, and fine print.
SDF Blog Hero
Editorial blog masthead splitting a featured essay beside a ruled list of recent posts.
SDF Careers
Eyebrow, title, and lede above a list of role links with location and hover-lift arrows.
SDF Changelog
Left-ruled release timeline with version, date, colored type tags, and per-entry change lists.
SDF Changelog Hero
Changelog hero with eyebrow, large title, lede, pill filter bar, and an RSS link.
SDF Channels
Three-up grid of contact-channel cards with number, title, body, and response time; middle featured.
SDF Contact Hero
Two-column contact hero pairing info and methods with a sticky message form card.
SDF Contact Stats
Eyebrow and title above a ruled four-up grid of response stats collapsing to two-up.
SDF Docs Hero
Centered docs hero with eyebrow, title, a pill search bar, and popular quicklinks.
SDF Enterprise
Dark CTA band pairing eyebrow, title, body, and button with a ruled meta list.
SDF Help FAQ
FAQ section with an eyebrow, title, and auto-fit cards grouping topic question links by category.
SDF Locations
Eyebrow and title above a three-up grid of location cards showing region, city, and address.
SDF Manifesto
Sticky left rail beside a numbered belief list with large ghost numerals and supporting copy.
SDF Matrix
Feature-comparison table with a dark header row and per-tier values shown as checks, dashes, or numbers.
SDF Mission
Centered mission statement with an eyebrow, large heading, and supporting body copy.
SDF Mission Hero
Editorial hero with a meta row, oversized statement headline, and a footer counter plus scroll link.
SDF Newsletter Band
Two-column band pairing eyebrow, title, and copy with an email signup form and reader count.
SDF People
Eyebrow and title above alternating portrait/bio rows with name, role, bio, and a facts list.
SDF Popular
Head with eyebrow, title, and all-guides link over a two-up grid of guide cards with view and read-time meta.
SDF Portfolio Hero
Hero with eyebrow, display headline, lede, and a large featured-project card linking to a case study.
SDF Posts
Archive section with filter pills and a ruled date/category/title/excerpt post list, each row a link.
SDF Pricing FAQ
Numbered accordion of FAQ rows with circular plus/close icons that open exclusively.
SDF Process
Four-up phase grid showing numbered steps with rule bars, durations, and descriptions.
SDF Projects
Three-up grid of project cards with media, number/year meta, title, description, and tag pills.
SDF Quickstart
Sticky aside beside a numbered list of install steps, each with a code block and note.
SDF Quote
Pull-quote section with an oversized quote mark, balanced blockquote, and ruled attribution block.
SDF Specs
Eyebrow, title, and lede above a ruled four-up grid of lettered specialty cells.
SDF Stats
Ruled four-up stat grid pairing large values with labels beneath an eyebrow and title.
SDF Status
Status dashboard with a head and grid of service cards showing status pills, uptime strips, and totals.
SDF Story
Founding-story timeline pairing year markers with title and body copy in top-ruled two-column rows.
SDF Subscribe
Two-column subscribe band with intro copy beside a ruled, hover-indent list of feed and email options.
SDF Support Hero
Centered support hero with a status pill, display headline, lede, and a pill-shaped search bar.
SDF Team
Team section with intro copy above a three-up card grid of portraits, names, roles, and bios.
SDF Team Hero
Split team hero with display headline, lede, and three-up meta beside a grid of gradient tiles.
SDF Tiers
Centered header above a three-up pricing grid with a dark featured plan and a most-chosen badge.
SDF Topics
Documentation topic browser with a three-up grid of hover-lift cards showing icon, count, title, and description.
SDF Values
Principles section with intro copy above a ruled two-up grid of numbered value cards.
SDF Badge
A small uppercase status pill with hairline border, four color tones, and an optional status dot.
SDF Banner
A slim full-width announcement banner with a leading dot, centered label, trailing arrow link, optional dismiss, and accent/dark/neutral tones.
SDF Bento
An asymmetric bento grid of hairline-bordered content cells where span:2 items stretch full width.
SDF Breadcrumb
A restrained, overflow-safe breadcrumb trail with slash or chevron separators and the last item marked as the current page.
SDF Button
A button or link element with primary, secondary, and ghost variants, three sizes, and an optional trailing arrow icon.
SDF Command Menu
A keyboard-first ⌘K command palette — fuzzy filter, grouped results, and full arrow/enter/esc keyboard navigation.
SDF Comparison Table
A feature comparison matrix across plans with a sticky header, a highlighted recommended column, check/dash booleans, and mobile scroll.
SDF Contact Form
A labeled, accessible contact form with name, email, optional company, and message fields that flips to a thank-you state on submit.
SDF Feature Grid
Responsive grid of icon + title + body features with hairline dividers. 2/3/4 columns.
SDF Logo Marquee
A horizontally scrolling strip of text wordmarks that loops seamlessly, pauses on hover, and respects reduced-motion.
SDF Newsletter
Inline email capture with single-row input, inline validation, and a success state, designed to sit on light or dark surfaces.
SDF Pricing Toggle
Pricing tiers with a monthly/yearly billing switch that animates the amounts and reveals the annual saving. Tabular figures, a featured tier.
SDF Stat Strip
A row of headline metrics with tabular figures and hairline dividers. Light + dark.
SDF Tabs
An underlined tab interface with an animated active indicator and full keyboard/ARIA support.
SDF Testimonial
A pull-quote testimonial with a large quote and an attribution row featuring an accent square avatar of the author’s initials.
SDF Hero Split
The page hero — eyebrow, headline, lede, primary + secondary actions, an optional trust row, and a media panel. Two-column split by default, with centered and text-only variants.
SDF Page Hero
A reusable centered page header — glass eyebrow pill, a large balanced headline, and a supporting lede for interior pages.
SDF Navbar Pro
A floating glass-pill navigation bar — frosted backdrop, gradient logo mark, centered links, and a sign-in + primary-CTA pair. CSS-only.
SDF CTA Banner
A dark, gradient call-to-action banner — glass-pill eyebrow, headline, supporting copy, and a pair of action buttons on a premium surface.
SDF Feature Split
Alternating image / text rows — a headline, body, and checklist paired with a framed visual, flipping sides for a zig-zag rhythm.
SDF Integrations
A centered heading over a tidy grid of integration tiles, each pairing a small accent-gradient mark with a tool name.
SDF Steps
A row of numbered process cards — a sequenced “how it works” block where each step gets a number tile, title, and short description.
SDF Showcase
A browser-framed product screenshot — window chrome with traffic-light dots around a 16:9 image on a soft elevation shadow.
SDF Post Grid
A blog / resource card grid — three-up whole-card links with cover image, category pill, title, excerpt, and author · date meta.
SDF Featured
A magazine-style featured post — one large split card with media, a dark-pill tag, headline, excerpt, byline, and a read link.
SDF Timeline
A vertical timeline / process rail — ordered moments on a continuous rail, each with a label, heading, and short description.
SDF Cases
A customer-stories section — one dark, glowing featured story with a pull-quote and stats, followed by a grid of compact metric cards.
SDF Metrics
A row of headline metrics — a big value, a muted label, and an optional delta line per stat. The numbers that prove the pitch.
SDF Logos
A “trusted by” logo strip — an optional centered eyebrow above a row of monochrome logos, as a static grid or a CSS marquee.
SDF Members
A team member photo grid — portrait cards with name and role, three-up on desktop, collapsing to two- then one-up.
SDF Roles
An open-roles list — one clickable row per position with title, department · location, and an “Apply” affordance that slides on hover.
SDF Q&A
A static FAQ section — a centered heading above a bordered card stacking question-and-answer pairs. No JavaScript; every answer visible.
SDF Support
A support-options section — three icon-link cards routing to sales, support, and docs, each a whole-card link with an accent icon tile.
Northwind Nav
Site-wide top navigation bar rendered as a shared component instance, repeated on every page.
Northwind Footer
Site-wide footer with grouped Product, Company, and Legal link columns.
Bricklumen Nav
Site-wide top navigation bar, already a registered Webflow component instance repeated across pages.
Bricklumen Footer
Site-wide footer, already a registered Webflow component instance repeated across pages.
Bricklumen About Hero
Opening hero band with the page's H1 title introducing the About page.
Bricklumen Blog Hero
Blog landing hero with an eyebrow label, h1 title, and lede paragraph introducing the blog.
Bricklumen Contact Hero
Contact page intro band with an eyebrow, an h1 title, and a lede paragraph inviting the visitor to get in touch.
Bricklumen Hero
Primary above-the-fold hero band introducing the page with headline and calls to action.
Bricklumen Owners Hero
Two-column hero with a text/CTA column and a media panel introducing the Owners page.
Bricklumen Properties Hero
Page hero with eyebrow, H1 title, lede paragraph, and an inline property filter/search bar.
Bricklumen Residents Hero
Opening hero band introducing the residents experience with headline and inner content.
Bricklumen Services Hero
Top-of-page services hero band introducing the services offering with headline and supporting content.
Bricklumen Team Hero
Page-intro hero band with an eyebrow label, an h1 title, and a lede paragraph introducing the team.
Bricklumen About Values
Values section with an H2 heading and four H3 titled cards outlining core principles.
Bricklumen Feature Band
Feature section highlighting key product or service capabilities.
Bricklumen Owners Services Grid
A headed section laying out the owner services offering as a grid of cards.
Bricklumen Owners Value Grid
A headed section presenting owner value propositions as a grid of feature cards.
Bricklumen Residents Perks Grid
"Renting, made simple" feature grid of four numbered perk cards (portal, maintenance, payments, etc.).
Bricklumen Residents Portal Preview
"Pay rent in two taps" feature spotlight paired with a mocked resident-portal payment UI card.
Bricklumen Service Detail
Detailed service breakdown band laying out the specifics of what the service includes.
Bricklumen Services
Services section detailing the offerings available to visitors.
Bricklumen About Stats
Four-up metric strip showing headline numbers like 480+ homes, 20 yrs, 98% retention and 4.9/5 rating.
Bricklumen Stats
Metrics band presenting headline numbers and proof-point statistics.
Bricklumen Owners Fee
A fee/pricing section pairing an intro block with a bulleted list of what the management fee covers.
Bricklumen Team Grid
The core team-member grid section that lays out individual people cards in a responsive grid.
Bricklumen About Story
Narrative company-story section anchored by an H2 title with supporting body copy.
Bricklumen Blog List
Grid of blog post cards listing the collection of articles.
Bricklumen Onboarding Steps
Onboarding/process band walking prospects through the steps of getting started with the service.
Bricklumen Property List
Property listing section combining a results/sort toolbar (bk-plist__bar) above a grid of property cards (bk-plist__grid).
Bricklumen Residents FAQ
Frequently-asked-questions band answering common resident queries.
Bricklumen About CTA
Closing call-to-action band ('Let's talk about your property.') with 'Get in touch' and 'Meet the team' buttons.
Bricklumen CTA
Closing call-to-action band prompting the visitor to convert.
Bricklumen Owners CTA
Closing call-to-action band with a heading, supporting paragraph, and action buttons.
Bricklumen Residents CTA
Closing call-to-action band prompting residents to sign up or log in.
Bricklumen Contact Body
Two-column contact section pairing an info panel of contact-detail blocks with an HTML form (with success and error states).
Foliotype Nav
Site-wide top navigation bar registered as a Webflow Component instance.
Foliotype Footer
Site-wide footer registered as a Webflow Component instance with logo, link columns, and prop-driven links.
Foliotype Hero
Above-the-fold hero with headline, supporting copy, CTA, and a hero video block.
Foliotype Bento
Bento-style grid layering multiple feature highlights in varied tiles.
Foliotype Plan Comparison
Feature-head plus a horizontally scrolling plan-comparison table across tiers.
Foliotype Features
Feature band presenting the product's core capabilities.
Foliotype Featured Article
Featured-post band pairing a large linked media image with an adjacent article body block.
Foliotype Whats Included
Feature-head plus a six-cell grid enumerating everything included in the plans.
Foliotype Integrations
Integrations section pairing a heading with a grid of integration/partner tiles.
Foliotype Contact Methods
Section header plus a three-cell grid of ways to get in touch.
Foliotype Steps
How-it-works section with a heading and a grid of sequential step cards.
Foliotype Values Grid
Values section with an eyebrow/H2 header and a three-cell grid of value cards.
Foliotype Logos
Logo wall showing customer or partner brands as social proof.
Foliotype Wall
Social-proof wall with a heading and a grid of testimonial or logo cards.
Foliotype Metrics
Row of headline statistics highlighting key numbers and outcomes.
Foliotype Pricing Tiers
Three-column pricing grid of tier cards presenting the plan options and prices.
Foliotype Team Grid
Team section with an eyebrow/H2 header and a four-cell grid of team member cards.
Foliotype Offices
Section header plus a grid of three office location cards.
Foliotype Post Grid
Grid of six linked journal post cards forming the main article listing.
Foliotype Split
Split two-column content section pairing copy with a supporting visual.
Foliotype Timeline
Timeline section with an eyebrow/H2 header and five chronological rows.
Foliotype Topics Grid
Browse-by-topic section with a heading header and a grid of six linked topic tiles.
Foliotype Video
Embedded video showcase section demonstrating the product in motion.
Foliotype FAQ
Frequently asked questions accordion addressing common objections.
Foliotype CTA
Closing call-to-action band prompting the visitor to convert.
Foliotype Contact Form
Contact form block with the form fields, success message, and error message states.
Foliotype Newsletter Signup
Newsletter subscribe section with eyebrow, heading, supporting copy, and an email capture form.
Northwind Contact Hero
Page-intro hero with an eyebrow label, H1 title, and supporting lede paragraph.
Northwind Hero Split
Split-layout hero pairing the headline, subcopy, and CTAs with a supporting visual.
Northwind Pagehero
Page hero with an eyebrow label, an h1 title, and a lede paragraph introducing the product.
Northwind Bento
Bento-style grid of tiled feature cards highlighting the product's core capabilities.
Northwind Feature Grid
Three-item feature grid highlighting the vertical offerings in a responsive card layout.
Northwind Feature Split
Alternating text-and-visual split band detailing a single flagship feature.
Northwind Featured
Large featured-article card linking to a highlighted post with media image and body text.
Northwind Integrations
Integrations section showcasing the third-party tools and services the product connects with.
Northwind Cases
Grid of customer case studies / success stories providing social proof.
Northwind Logos
Logo strip showing customer or partner brands as social proof beneath the hero.
Northwind Marquee
Scrolling logo marquee providing social proof through a strip of customer or partner brands.
Northwind Testimonial
Customer testimonial quote with attribution reinforcing credibility.
Northwind Metrics
Row of headline statistics quantifying impact or scale.
Northwind Pricing Table
The core pricing tier comparison table listing plans, prices, and features.
Northwind Members
Team members grid presenting people with photos, names, and roles.
Northwind Post Grid
Grid of blog post cards rendered as a reusable Webflow component instance.
Northwind Roles
Listing of open roles or positions available for candidates to browse and apply to.
Northwind Showcase
Browser-framed product screenshot showcase presenting the Northwind dashboard image inside a chrome bar frame.
Northwind Steps
Numbered how-it-works sequence walking through the process step by step.
Northwind Timeline
Company history timeline laying out milestones in chronological order.
Northwind FAQ
Frequently-asked-questions accordion addressing common pricing and plan queries.
Northwind Support
Reusable support component surfacing help channels or support resources.
Northwind CTA Banner
Full-width call-to-action banner prompting the visitor to convert.
Northwind Newsletter
Newsletter signup call-to-action block registered as a Webflow component instance.
Northwind Contact Split
Two-column split pairing the contact form with a contact-info panel of details.
One install
The whole set, inside your Webflow project.
Install the library once and every component lands with its styles and variables — and stays updatable as we ship new ones.
- Native components with props & variants
- Styles & variables come along
- Updatable — new components appear automatically
Get the library
Releasing soon
