Understanding how Sections behave
All styles are pre-defined and self-contained
Typography, spacing, colors, headings, buttons, animations — everything is already written into the classes of the Section. There is no dependency on Webflow Variables, and no reliance on a global style guide.
This is the property that makes Sections work everywhere. Because nothing relies on external context, the same section can be copied into Webflow, Figma, Framer, or rebuilt by an AI coding tool — and it always looks exactly like the preview.
Collections have different naming conventions
Evermind uses a certain naming style.
Hollow uses another.
Forerunner has its own logic.
If you mix sections from multiple collections in the same Webflow project, Webflow will naturally generate class variations (like [class]section-2[/class], [class]heading-3[/class], etc.). This is expected and nothing is “broken”.
Sections prioritize visuals over systemization
They are intentionally simple: copy, paste, adjust.
No architecture, no tokens, no variables.
If you need scalability and a unified class system, Skeletons are the better choice.
Structural classes are unique and intentional
Grids, wrappers, inner containers, decorative elements — these classes define the layout and should usually remain unchanged. They belong to that Section specifically and don’t interfere with other components.
Why this matters for the new copy options
The same self-contained property is why every section can be copied four ways without breaking:
- Copy to Webflow / Figma / Framer — the section carries its full visual identity into the new tool, with all styles intact
- Copy Prompt — the AI coding tool gets the full reference code and styling rules embedded in the prompt, so it can rebuild the section faithfully inside your project
No matter which copy method you use, the section’s design integrity stays consistent. That’s what the “self-contained” architecture is really for.
