Components

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.

Naming Webflow Components

When naming the Webflow Components themselves (not the class names), 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. "Global / " shows all global components that can be used inside any section. "Icon / " shows all svg icons. "Btn / " shows all button types.

Naming Component Fields

When naming component props, the part before the forward slash is the group name, and the part after it is the field name. Fields can't share the same name as other fields, even if they're in different groups. For that reason, each field name should repeat the group name.

Organizing Component Groups

On section components, the Styles folder should appear first and should contain all styles for that section. 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.

Why Lumos Does Not Use Generic Section Components

When it comes to component slots, there are two approaches. One is to use generic element names and make components as flexible as possible. The other is to use section-specific names and make the component only do one main thing. While both have great merit, unique components for each specific purpose are created in Lumos. This is consistently the most helpful approach for teams and clients. Section-specific components create tremendous value for the client and for the long-term maintainability of the site.

Faster Page Building

When the user drops in a section component, all or nearly all of the required elements are already inside it.

Global Style Updates

Example: Making the heading larger inside every features section across the whole site.

Global Subcomponent Replacement

Example: Replacing the button component with a text link component inside every features section across the whole site. (The text link component just gets connected to the text and url fields on the parent section that the button was using and no content has to be manually replaced across pages.)

Global Content Changes

When each section type is its own unique component, we can choose if the heading or paragraph text should be linked to prop fields or should be the same for every instance of that section component.

More Structured Design System

We get to choose which elements are and aren't allowed in any given component and how they should look when inside that component.

Better Accessibility Control

We get to ensure the right aria labels and accessibility settings are added to any given element based on where it's used. (Example: a grid containing a list of items needs role="list" but a grid separating our content from our visual does not.)

Better Interaction Control

Creating unique interactions requires much control over style and layout often for every single element within that section. Creating section-specific components allows us to globally update an interaction later for only instances of that specific component.

All Default Components

The following are all components that come in Lumos by default.

"Custom Code" Component

Used for storing css that should apply to every page of our website

"Grid Guide" Component

This component is used for creating grid guides in the webflow designer similar to Figma Grid Guides. These guides automatically hide in preview or on the published site. The .styleguide_guide_wrap is set to position: fixed; pointer-events: none; z-index: 2000; and inside are .styleguide_guide_column divs with background colors. That's where we can customize the colors of our columns. To hide the guides, open the component and under settings, switch Visibility to hidden so that the change applies across every page of the site. That visibility is not linked to a component field because then changing it would only affect the page we're currently on.

"Global / Visual" Component

Use this component for any image or video that needs to cover an area. It is positioned absolutely to fill its parent, which should have the class u-visual-wrap for relative positioning and aspect ratio. The component includes:

A background which acts as a skeleton placeholder before the media loads (background set to parent font color at a 10% opacity)
An image element, visible by default.
A video element, hidden by default. If both are enabled, the image shows under the video as a placeholder before the video loads.
An overlay, hidden by default, which can darken the media when it's used behind text. Control the opacity of the overlay from the component field.

"Global / Eyebrow" Component

This component can be used as a subheading throughout the site.

"Global / Clickable" Component

Positioned absolute to cover any parent it's added to, making the whole parent clickable
Use inside any button or card components
If url field is left empty, the button tag will be used. If url field is filled, the link tag will be used.
When screen readers focus on the link or button tag, it will read the hidden text inside using the "u-sr-only" class

This component has a z-index: 0 only in designer view to keep any position relative content clickable in designer view.

"Btn / Main" Component

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

"Btn / Play" Component

A play button element

"• Section / Simple" Component

Duplicate this component before using it, and don't include the bullet in the new component name so that this template component stays at the top of the list. This is used as a starting point for creating a new section. It contains only a section and a container.

"• Section / Full" Component

"Starter / Heading" & "Starter / Paragraph" Components

This component includes a rich text element allowing for bold, italics, and links inside. Unlink this component before use.

"Starter / CSS" Component

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.

"Starter / JS" Component

Contains an embed set to display none. Unlink this component before using it. This is used for adding javascript inside any section component and contains the following script to use as a starting point. Rename 'yourFunctionName' to something that is specific to your component such as 'teamSlider'. This function prevents errors when the same component is used multiple times on one page and ensures our script doesn't run until the before closing body tag.

<script>
pageFunctions.addFunction('yourFunctionName', function() {
	// your code
});
</script>

"Icon / Arrow Full" Component

An svg arrow icon pointing right

"Icon / X" Component

An svg x icon

"Icon / Arrow" Component

A very simple svg arrow icon pointing right

PreviousFluid Responsiveness NextFAQs

Last updated 20 days ago