Components
Last updated
Last updated
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.
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.
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.
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.
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.
The following are all components that come in Lumos by default.
Used for storing css that should apply to every page of our website
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.
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.
This component can be used as a subheading throughout the site.
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.
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
A play button element
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.
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.
This component includes a rich text element allowing for bold, italics, and links inside. Unlink this component before use.
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.
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.
An svg arrow icon pointing right
An svg x icon
A very simple svg arrow icon pointing right
