Where can I find the CSS class "wf-section" in Webflow, as it is used in a downloaded template but not listed in any of the stylesheets?
TL;DR
- "wf-section" is an internal Webflow class auto-assigned to Section elements for default layout and spacing, defined in Webflow’s core CSS but hidden from user style panels.
- To customize it, add your own class to the Section or use custom CSS via embeds or page settings; on export, its styles are in the default webflow.css, so don’t remove that file.
The "wf-section" CSS class in Webflow is an automatically added utility class used internally by Webflow for structure and layout, especially for Section elements.
1. Where "wf-section" Comes From
- Webflow automatically assigns the "wf-section" class to elements that are dropped into the canvas using the Section element.
- This class sets default spacing and layout behavior across sections to ensure consistent visual structure.
2. Why You Don’t See It in Stylesheets
- The "wf-section" class is not a user-defined class, so it won’t appear in your Style Manager or CSS stylesheets when you export or inspect your Webflow project.
- It is included as part of Webflow’s base styles and defined in their platform-generated CSS, typically minified and bundled during page load.
- Because it's an internal class, its rules are applied globally and intended to support cross-template consistency.
3. How to Override or Customize
- You can add your own class to the same Section element (e.g., “HeroSection”) and apply custom styles manually.
- If needed, you can inspect the rendered HTML (in browser via Developer Tools) to view what CSS rules "wf-section" is applying.
- You can also include custom CSS overrides using the Embed element or in Page Settings > Custom Code if you're trying to override core styles.
4. When Exporting Code
- When you export Webflow code, the "wf-section" class remains in your HTML because it's part of the element structure.
- However, its CSS is provided via Webflow’s default webflow.css file, which is referenced in the export:
- This CSS file includes definitions for internal utility classes like wf-section, w-button, wf-clearfix, etc.
- If you delete this file or asset link, classes like "wf-section" will have no effect.
Summary
The "wf-section" class is an internal Webflow utility applied to Section elements for default spacing. It doesn’t appear in your Style Manager or user-defined stylesheets because it’s included in Webflow’s base CSS. To customize or override, add your own class or use custom code.