Changelog

The Modal has evolved from a Starter into a fully dynamic Component. Powered by GSAP interactions, it no longer relies on static structure—making it reusable, flexible, and suitable for multiple instances on the same page.

• Converted Modal from Starter to full Component with style props and Edit Mode support.
• Rebuilt interactions using GSAP, enabling smoother animations and reusable modal logic.
• Supports multiple modals on the same page without structural duplication.

ATOM now leverages Webflow’s native GSAP integration to deliver professional-grade animations without custom code. Motion is controlled directly through Component Props, eliminating the need for complex interaction setups while keeping animations consistent across the system.

The animation system is structured around two automatic behaviors:

• Added Load Animations, triggered on page load—primarily used for Headers.
• Added Scroll Stagger Animations, triggered when elements enter the viewport—used across Sections, Grids, and Elements.

A compact content component designed for structured image-and-text layouts. It maintains a clean horizontal alignment while adapting responsively when space becomes limited.

• Added Image List Component with horizontal image + title + paragraph layout.
• Automatically wraps text beneath the image on smaller screens for smooth responsive behavior.
• Supports image properties such as aspect ratio and radius, including round images via aspect ratio settings.

The Flexbox system has been refined for clarity and expanded with additional style controls. Components are now streamlined while offering more flexibility through enhanced layout properties.

• Reduced Flexbox Components to Row and Column for a cleaner, more focused structure.
• Added additional style properties for improved alignment, distribution, and layout control.
• Continues to pair seamlessly with gap utilities for consistent spacing across layouts.

‍

Title Content and Title Column have been consolidated into a single, flexible Title component. This streamlines the system while preserving layout versatility for structured section introductions.

• Merged Title Content and Title Column into one unified Title Component.
• Supports both stacked and two-column desktop layouts (title left, content/buttons right).
• Automatically stacks on mobile for consistent readability and responsive behavior.

A dedicated filtering component built to work seamlessly with all CMS List variants. It comes preconfigured with the required Finsweet Attributes, enabling instant filtering with minimal setup.

• Added CMS Filters, ready to connect to any CMS List.
• Works out of the box for basic filtering—simply connect it to your collection.
• Supports advanced filtering logic and multiple filter groups via extended Finsweet configuration.

The Tabs system has evolved from a starter layout into a fully configurable component. Built on Webflow’s native tabs, it now supports structured prop control while maintaining full flexibility inside each tab pane.

• Converted Tabs from Starter to complete Component with props.
• Supports up to six tabs with selectable top or side menu layout.
• Each tab pane can contain any components, enabling flexible and content-rich tab sections.

A complete set of CMS-ready components built for filtering, listing, and sliding dynamic items. Every component comes preconfigured with the correct Finsweet Attributes, making activation as simple as adding the appropriate attribute values in the props panel.

• CMS Lists: CMS List Card + CMS List Link Card + CMS List Background Card – with fully prepared attribute structures for filtering, sorting and styles variants.
• Starter CMS Filters with all required Finsweet attributes pre-wired. Just add your attribute values to enable filtering.
• Starter CMS Slider preconfigured for Finsweet’s slider setup for effortless CMS-driven slide layouts.

A simple, no-props starter designed to make tab setup fast and flexible. Built on Webflow’s native tabs, it provides a clean structure you can duplicate and customize freely—ideal when tab content varies widely.

Added Starter Tabs Top and Starter Tabs Side, each with three default tabs. Unlink or copy to adjust tab count and content. Both versions offer flexible alignment via flex controls, with mobile-friendly behavior built in.

More information can be found on the Starters Page.

A flexible, full-width mega menu built for large navigation structures. It enhances usability on both desktop and mobile while integrating seamlessly with the existing Navbar system.

• Added Mega Menu to the Navbar component with full-width desktop layout for spacious, structured navigation.
• Added mobile-friendly slide-in animation, delivering smooth, intuitive interaction on smaller screens.

A flexible starter built on the native Webflow slider, designed for fast setup and full creative freedom. It provides a clean structural baseline while allowing you to populate each slide with any components you need.

• Added Starter Slider built on Webflow’s native slider.
• Supports any component inside slides—cards, link cards, images, or custom content—after unlinking and adjusting the slide count.

A new function for switching between different color schemes across the entire site.

• Added three toggle modes: Dark, Brand 1, and Brand 2.
• Added Toggle Mode Component for easy, drop-in mode switching on any page.
• Added detailed setup and implementation guide (see the Toggle Mode page for full instructions).

Starter components now include a wider range of prebuilt layouts designed to accelerate page creation. Every starter follows best-practice structure, includes smart props and variants, and can be unlinked or duplicated for full flexibility.

1. Starter Modal for quick, reusable overlay structures.
2. Starter Form for rapid form setup with consistent styling.
3. Starter Lightbox Image for image-based media previews.
4. Starter Lightbox Video for video-based lightbox interactions.
5. Starter Code Block for clean, readable code presentation, with copy-paste functionality.
6. Starter Background Video for responsive, media-rich background sections.

A major expansion that introduces a full page-building workflow powered entirely by components and props. The new Builder Mode removes the need for manual class management, enabling rapid, consistent page assembly with zero styling overhead.

• Added Builder Page Template, a ready-to-use page scaffold optimized for component-only workflows.
• Added Builder Sections Section Base Section Background – prestructured sections built to be fully controlled via props and compatible with all components in the system.
  ‍

The icon system now offers broader coverage and clearer guardrails. A larger set of scalable vector icons improves UI range, while updated guidelines ensure developers can add custom icons without breaking consistency or structure.

• Added new scalable UI icons to expand the core library.
• Introduced clear instructions for adding custom icons, including naming, sizing, and component setup for seamless integration.

A set of foundational, reusable components designed to speed up layout assembly and ensure consistent styling. These element-level building blocks can be used standalone or inside larger structures like cards, headers, and content blocks.

1. Block Quote for highlighted text and callouts.
2. Video element for embedding responsive video content.
3. Breadcrumb navigation element for hierarchical page structures.
4. Dropdown for interactive menus and expandable UI patterns.
5. Accordion for collapsible content sections.
6. Logo element for brand identity placement.
7. Info Box for compact informational highlights.
8. Icon List for bullet lists enhanced with icons instead of standard markers.

A flexible layout system for precise horizontal and vertical alignment. Flexbox is now available both as utility classes and as ready-to-use components, giving you full control whether you prefer class-based structure or component-driven layouts.

• Added Flexbox Row (classes + component) for horizontal alignment and linear content flow.
• Added Flexbox Column (classes + component) for vertical stacking with clean, controlled spacing.
• Added Flexbox Wrap (classes + component) for responsive wrapping when content exceeds available width.

A new set of shared structural components that unify navigation and site identity across the entire project. These globals simplify setup, enforce consistency, and remain fully customizable through layout, content, and color scheme options.

• Added flexible Navbar with full color scheme support, optional top bar, and easy link/layout customization.
• Added adaptable Footer with full color scheme support and a minimal variant for legal-only implementations.

Introduces the first set of layout templates built entirely with smart, dynamic components. Designed as flexible starting points for fast, consistent page structures.‍

• ‍Header Base – A flexible foundation for building custom header layouts. It provides the core header structure and props for spacing, alignment, and color scheme, while letting you add any components you need.‍
• Header Stack – Combines a Title Content block with a full-width Image component. The text can be placed above or below the image for layout variety.‍
• Header Background – Classic hero layout with Title Content and an Image component positioned absolutely via prop settings.
  

These layouts serve as adaptable blueprints—built on smart components, fluid spacing, and prop control—to accelerate design while keeping creative flexibility limitless.

Extends the ATOM system with powerful, content-driven components for layout and presentation.

1. Auto Grid Fit + Auto Grid Fill – responsive grids that automatically adjusts columns based on available space. Set min item width, with optional gap and alignment classes.
2. Even Grid Grid using fractional (fr) columns. Define column count and use optional gap and alignment classes. Fully responsive across breakpoints.
3. Uneven Grid Asymmetric grid layouts (2–1 or 1–2) for visual contrast. Includes gap and alignment options.
4. Card Flexible content card with two layout variants: Card and Box. Supports image, icon, meta, and button visibility. Align content left or centered, and enable hover effects via global styles.
5. Link Card Clickable version of the card component. Supports image, icon, and meta visibility, available as Link Card or Link Box, with hover effects controlled in global styles.
   

This release adds the Smart Content Components, completing the foundation for structured, dynamic content layouts.

A foundational release introducing the full suite of smart base components for faster, consistent, and scalable builds.

1. Title Content Section intro with title, body, and button. Full control over spacing, tags, alignment, and visibility.
2. Title Columns Horizontal section header with heading on the left and text on the right.
3. Heading Smart heading component with selectable HTML tag, size, and text.
4. Body Paragraph component with adjustable size and spacing props.
5. Button Group Configurable button set; choose button types, labels, and links.
6. Image Flexible image with props for position, aspect ratio, and corner radius.
7. Rich Text Clean rich text block with adjustable spacing.
8. Spacer Quick fluid spacing element tied to the variable system.
9. Icon Scalable icon component with size control and theme-inherited color.
   

A key milestone establishing the Smart Component Framework within the ATOM Design System.

A major update bringing a fully upgraded style guide and extended fluid capabilities across the system.

• Complete style guide overhaul with all variables, grids, and fluid spacing.
• Fluid icon sizing for scalable visual balance.
• Auto Grids now feature dynamic gaps for smoother responsiveness.
• Color utility classes linked directly to the color schemes.
• New text styles: .heading-style-display-1 .heading-style-display-1 and .text-size-xlarge for flexible typography scaling.
  

A release that unifies structure, scale, and style.

Builds on the dynamic color system with predefined color schemes for rapid setup and consistent design.

• Four schemes:
  ‍Base mode .color-scheme-base
  ‍Brand 1 mode .color-scheme-brand-1
  ‍Brand 2 mode .color-scheme-brand-2
  ‍Dark mode .color-scheme-dark
• Each scheme defines colors for background, foreground, text, borders, and buttons.
• Streamlines theme management and accelerates project styling.

Introduces a smart color system driven by your primary and secondary brand colors.

Automatically generates extended palettes with lighter and darker variants using mix color functions.

• Define Brand One and Brand Two base colors.
• Auto-generate shades and tints as CSS variables.
• Enables consistent color logic across all components.

The first release of the Atom Fluid Library, built on Client-First v2.1.

This version establishes a fully fluid framework featuring:

• Fluid typography that adapts smoothly across breakpoints.
• Fluid spacing for consistent, proportional rhythm.
• Responsive auto grid system with flexible class structure.
  

The baseline for a scalable and adaptive Webflow design system.