Layouts

Specific ways we create consistently layed out components.

Table

Review and update the custom attributes used across all elements in the table that make it accessible for screen readers and equivalent to a traditional <table> element. For example, on the table-grid, element you must set the specific count of rows and columns, as well as give the table a name.

Heading

Cell

Heading

Cell

Heading

Cell

Heading

Cell

Heading

Cell

Testimonials

coming soon...

Sticky features

A sticky scroll feature highlight effect used across webflow.com. This is cleverly setup by leveraging the native "Current" state of links, where an empty link in both the left and right side are linked to the ID of each section's element with class sticky-features_item. Be sure to include the corresponding custom CSS in the styles__this-page-custom-code embed at the top of the page.

Left Set

Connect dynamic content to any layout

You’re not locked into any layout — simply add the elements you want and pull in the data from your CMS.

Filter what you display

Conditionally display content as needed, sort based on a given field, or hide content you don’t need.

Build a custom search experience from scratch

Design your search experience from scratch — visually — and control exactly what content your site visitors can discover.

Right Set

Give clients access

Invite teammates and clients so they can edit and add new content anytime.

Edit once — update everywhere

Need to change an article's headline? Edit it once, and it’ll update across the site.

All features grid

Used at the bottom of every major feature page as a global overview of all key Webflow features.

All features

Discover everything you can do with Webflow.

Localization

new

↗

Create fully localized experiences for site visitors around the world.

CMS

↗

Define your own content structure, and design with real data.

Ecommerce

↗

Goodbye templates and code — design your store visually.

User Accounts

↗

Build gated content experiences for your audience.

Designer

↗

The power of CSS, HTML, and Javascript in a visual canvas.

Edit mode

↗

Custom-built environment for content teammates.

Logic

↗

Create custom automated workflows and connect to third-party apps.

SEO

↗

Optimize your website with controls, hosting, and flexible tools.

Hosting

↗

Set up lightning-fast managed hosting in just a few clicks.

Grid

↗

Build smart, responsive, CSS grid-powered layouts in Webflow visually.

DevLink

↗

Create production-ready React components visually in Webflow.

Figma to Webflow

↗

Turn your static designs into clean, production-ready code.

Interactions

↗

Build websites interactions and animations visually.