EN IT
Home About Learn Blog

Webflow Component Variants & Your First CMS Collection

Beginner 25:52 webflowcomponentsvariantscmsgrid

Learn Webflow component variants to swap layouts by styling, then build your first CMS collection and lay it out with a grid — the foundation of a dynamic team section.

Watch on YouTube

Key takeaways

  • Variants are about styling, not structure — reordering elements in the navigator changes the whole component, but a variant only swaps styles on the instances you assign it to.
  • You can flip a Flexbox row's order with a single 'row reverse' style, which is exactly how you build an image-first variant without touching the HTML.
  • A CMS lets you build a layout once and fill it with many entries: collections group content by type, fields define what each item holds, and items are the individual entries.
  • Choose field types deliberately — plain text for short strings, image for photos, link for URLs — and reach for rich text only when content needs headings, lists, or multiple paragraphs.
  • Team member cards are a two-dimensional layout, so a grid is the right tool; Flexbox can do 2D but grid is faster and clearer for rows-and-columns.

Video chapters

  1. 00:00 Intro to Webflow component variants
  2. 07:58 Intro to the Webflow CMS: your first collection
  3. 19:35 Team section structure: collection lists and CSS grid

By the end of this lesson you’ll finish the features section with component variants and start the team section by building your first CMS collection. These are two of Webflow’s most powerful ideas, and together they unlock layouts that are both consistent and genuinely dynamic.

First we solve the alternating layout from last time. The instinct is to reorder the elements — but that teaches an important lesson about what variants actually are. Then we pivot to the CMS: instead of hand-building every team card, we build the card once and let the content flow in from a collection.

The through-line is build once, adapt many times. A variant adapts a component’s look per instance; the CMS adapts a single layout to hold as many entries as you like. Learn both and you stop repeating yourself.

How it works

Variants trip people up because of one subtlety: they’re about styling, not structure. If you reorder the text and image wrappers in the navigator, that’s a structural change to the component definition, so it hits every instance — not what you want. The fix is to make the swap a style. Since the feature item is already a Flexbox row, select your new variant (say, “Image First”) and set the row direction to reverse. Now only the instances you assign that variant to flip their order, while the rest stay on the base variant. Variants behave like a component property: the default stays “base”, and you switch individual instances as needed.

The CMS is the other half. A content management system lets you build a layout once and fill it with different content. Three words to keep straight: a collection groups content by type (team members, blog posts, projects); fields define what each entry holds (a name, a role, an image, links); and items are the individual entries. You design the fields to match your reference — here that’s a profile image, a name, a role, and two social links — and Webflow can even generate realistic sample items with AI so you’re not stuck inventing content.

To put CMS content on the page you use a collection list bound to a collection, and to arrange the cards you use a grid. The team cards form a two-dimensional layout — rows and columns — and while Flexbox can do 2D, grid is the faster, clearer tool for this shape. Set the collection list to display: grid, choose three columns, and every item slots into place automatically.

How to use it

  1. Make the feature item a component. Select it, press ⌘/Ctrl + Shift + A, and name it “Feature Item”. Add text properties for the name and description and an image property for the photo (no alt-text property needed — Webflow uses the asset’s own alt text).
  2. Create a variant. Enter edit mode, open the variants popup from the component icon in the style selector, add a variant named “Image First”, and — with that variant selected — set the feature item’s flex direction to reverse. Exit edit mode.
  3. Assign it. Swap the three plain feature items for instances of the component, fill in each instance’s content, and set the variant property to “Image First” on the alternating cards.
  4. Build the team structure. Add a new section → main-container → section_content-wrapper, then add an instance of the Section Heading Wrapper component and set its content.
  5. Create the CMS collection. Open the CMS, add a collection named “Team Members”, and create fields: an image (Profile Picture), plain text (Role), and two link fields (LinkedIn Profile, X Profile). The default Name field covers the member’s name.
  6. Generate content. Use Generate sample items with a short prompt (e.g. “Each item is a different member of an IT team”), create around ten, and trim to the number your grid needs.
  7. Lay it out with a grid. Add a collection list, bind it to Team Members, set the collection list to display: grid with three columns and a 1.2em gap, then add and connect the card elements (image, name, role, social links) to their CMS fields via the purple icons.

We stop just short of styling the cards — because in the next lesson we turn them into a component whose properties connect straight to the CMS, and reuse the exact same trick in a completely different context: the FAQ section.

Resources

Frequently asked questions

What is a component variant in Webflow?
A variant is an alternate set of styles for the same component. You assign it per instance, and it changes only appearance — not structure — so one component can adapt to different contexts without you creating a whole new component.
Why did reordering elements change every instance of my component?
Because moving elements in the navigator is a structural change, and structure belongs to the component itself, not to a variant. To change layout per instance, do it with styling — for example, reversing a Flexbox row — on a specific variant.
What are collections, fields, and items in the Webflow CMS?
A collection groups content of one type, like team members or blog posts. Fields define what information each entry can hold, such as a name, image, or link. An item is a single entry inside the collection.
When should I use a grid instead of Flexbox in Webflow?
Reach for a grid when the layout is genuinely two-dimensional — rows and columns together, like a card gallery. Flexbox shines for one-dimensional rows or columns and can handle 2D, but grid is faster and clearer for this shape.

← Back to the course