Components
Components Strategy
Open Components
Open Components make it easy to add new elements inside a component without extra setup. They’re best for one-off use cases or components that need lots of structural or styling flexibility. However, if you reuse an Open Component across your site and later want to make global design changes, like adjusting the row gap or heading size, you’ll need to update each instance manually.
Closed Components
Closed Components require more setup time to create conditional props for each element that should be controllable, but they provide greater design, structure, and content consistency and can be easier for a non-developer to work with while reducing the chances of them breaking layout and functionality.
Turning an open component into a closed component
We can wrap an open component in a div and turn that div into a custom component.
This allows us to surface certain props that should be unique for each instance of the component such as Heading Text while leaving other props such as Font Style globally updatable across all instances of that component.
To access slots on the parent component, we need to nest a slot inside the existing slot. Give the nested slot a class of "u-display-contents" so that it will be ignored visually and its children will be treated like they are directly inside the original slot.
Duplicating A Component
When we duplicate a component from the component panel, all of its component props (fields) get copied also. This makes duplicating a component a fast way to setup a new, similar component without manually recreating all of the fields.
Naming Webflow Components
When naming the Webflow Components, component names should start with the broadest term possible. This allows us to filter while searching. If we type "Section", it will show all reusable section components used throughout our site. If we type "Section Hero", it will show all hero sections used throughout our site. Searching "Button" shows all button components. "Icon" shows all svg icons. "Form" shows all form-related elements.
Organizing Component Groups
On section components, the Section folder should appear first and should contain all styles and properties related to the section element. The element folders should be next and be listed in the order that they appear within the section.
Within each group, element visibility should always appear first. Other fields should follow in the order of most commonly used appearing first.
All Default Components
The following are all components that come in Lumos by default.
Section Group
Holds all custom sections for global reuse throughout the site
• Section Custom (duplicate this)
Use this only when you need custom control over the classes and structure of a section.
In most cases, it's better to start with the generic "Section" component instead.
Section Custom gives us direct access to the plain divs and elements that makeup a section and container. Allowing us to add custom classes to these elements and add non-component elements into the custom section without needing a slot.
Duplicate the component from the components panel
Give the component a custom name
Duplicate the existing custom classes on the section and container and turn them into unique names such as hero_wrap and hero_contain
Remove any props and elements that you don't need
Button Group
Holds all button components that can be used by the client
Buton Main
The main button structure used throughout our site.
Contains the "Global / Clickable" component so it can include a link tag or button tag
btn_main_text set to aria-hidden="true" so that content inside it is not read by screen readers and only the text in the link is read by screen readers.
Button Play
Contains a play icon and pause icon that can be toggled with JavaScript or Custom CSS
Button Text Link
Text Link component used throughout the site
Form Group
Holds all form related components
Form
Built with custom elements, this form element contains a slot where we can add any form fields and create custom forms in Build Mode by simply changing the form name.
The native Webflow Form element gives more control such as allowing redirects and custom recipients for each form, but this custom element form allows us to create forms quickly in build mode even without designer access. (Form fields built with custom elements can be used inside both the native Webflow form element and this custom form element.
Form Checkbox
Checkbox built with custom elements that allows us to keep our structure and style globally updatable site-wide
Form Fieldset
Group that can hold multiple related checkboxes or radio elements together
Form Input
Standard input element that can be used for names, emails, phone numbers, urls, passwords, or any other plain text content
Form Radio
Radio built with custom elements that allow us to our structure and style globally updatable site-wide
Form Select
Select element with a slot to hold select options
Can be populated with a collection list to dynamically display select options
Form Select Option
Option elements that go inside a Form Select to create the select's choices
Form Textarea
Text Area component built from custom elements
Global Group
Holds components used on every page of the site such as the nav, footer, and global code
Global Guides
Gives a visual preview of grid guides. Helpful for checking alignment between sections
Global Styles
Contains CSS that should be used on every page of the site
Interactive Group
Holds interactive, JavaScript-powered components
Slider
Swiper.js slider for CMS or static content with props for responsiveness, overflow, and slider settings
For CMS use, give the collection list a class of "swiper-wrapper". Turn the collection wrapper into a component and place it inside the slider's slot.
To connect the slider to controls that are outside of the Slider component, give the section an attribute of data-slider="component". Give any buttons the attributes of data-slider="previous" and data-slider="next"
Layout Group
Holds layout components with empty slots designed for holding different types of elements
Buton Wrapper
Horizontal flexbox for stacking buttons side by side
Horizontal alignment inherits from the alignment mode of the section or parent
Customize the gap and margin of the wrapper by using classes
Content Wrapper
Designed to hold content like headings, paragraphs, and buttons together
Has a variant for setting horizontal alignment of children to left, center, or right
Grid
Variant for setting max column count
Switch between an auto-fit or auto-fill grid
Set min column width
Switch to a different grid type by using classes like u-grid-above if needed
Layout Div
Div component with slot that can only any content
Section
Theme Variant for color switching
Padding top & bottom variants
Slot for container content
SVG Group
Holds icons, logos, and all svgs
Icon Arrow
Icon Arrow Full
Icon X
Logo
Site-wide logo used in the nav, footer, and everywhere else. Replace the SVG in this component using the SVG Import App to update the logo globally.
Typography Group
Holds all text-related components
Typography Eyebrow
Subheading component used site-wide
Typography Heading
This is a rich text heading element. Plain text headings can't have bold, italic, or subscript characters inside them when linked to a component prop. So rich text is the default for all headings in Lumos. Headings are their own component separate from paragraphs so that the font sizes, spacing, and other styles can be easily controlled independently for each element.
Variant for font size
Class attribute for other styles
Add u-child-contain and u-max-width- when the heading should have a max width while also respecting the alignment mode of the parent
Typography Paragraph
This is a rich text paragraph element. Plain text paragraphs can't have bold, italic, or subscript characters or links inside them when linked to a component prop. So rich text is the default for all paragraphs in Lumos. Paragraphs are their own component separate from headings so that the font sizes, spacing, and other styles can be easily controlled independently for each element.
Variant for font size
Class attribute for other styles
Add u-child-contain and u-max-width- when the heading should have a max width while also respecting the alignment mode of the parent
Typography Tag
Text in a card-like tag used as a subheading or callout throughout the site
Utility Group
Holds components that shouldn't be used by the client or someone in Page Build Mode. These utility components go inside of parent components but aren't intended for direct use.
Background Color
Position absolute div that covers the background of a section and has variants for switching between lighter and darker shades of the section's background color within each theme.
Clickable
Position absolute link block and button tag that goes inside of cards or buttons to make them clickable. When the link block's url isn't set, the link block is set to display none and a html button tag is used in its place.
Spacer
Used to create top and bottom space within each section. Has variants for switching spacer size.
Starter / CSS
Contains an embed set to display none with <style></style> tags inside. Unlink this component before using it. This is used for adding css inside any section component and should be the first child of the section.
Starter / JS
Contains an embed set to display none. Unlink this component before using it. This is used for adding javascript inside any section component. It should be the last child of the section and contains the following script to use as a starting point.
The DOMContentLoaded ensures the script doesn't run until all of the page content is loaded.
The each loop applies the code to every instance of .your-section throughout the page. Replace "your-section" with the class of your current section.
An attribute of "script-initialized" is added to the section so the script never runs on the section more than once even if the embed is included multiple times on the same page.
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".your-section").forEach((element) => {
if (element.dataset.scriptInitialized) return;
element.dataset.scriptInitialized = "true";
// run script here
});
});
</script>jQuery Version
If you'd prefer to work with jQuery instead of JavaScript, here is the jQuery version.
<script>
document.addEventListener("DOMContentLoaded", function () {
$(".your-section").each(function () {
if ($(this).attr("script-initialized") === "true") return;
$(this).attr("script-initialized", "true");
// run script here
});
});
</script>Visual Group
Holds components such as images, videos, overlays, gradients, and textures
Media Overlay
A position absolute div with a black background and a prop for controlling the overlay's opacity.
Use above images or videos to darken them when text is on top of them.
Visual Image
Image with an aspect ratio and faded background color that shows as a placeholder before the image is loaded in.
Use the image as a section background by adding the following classes and placing the image in the container
Visual Video
HTML Video Element
Must have a direct link to the video file through services like Bunny.net, a paid Vimeo account, GetAFile, or similar.
Use the video as a section background by adding the following classes and placing the video in the container
Last updated
Was this helpful?