Components

General Approach to Components

To learn about the Lumos approach to components, watch this tutorial.

https://www.youtube.com/watch?v=Hw69guTkjT8

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.

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 / Card Link" Component

This component is a link block with position: absolute, width: 100%, height: 100%, opacity: 0, and z-index: 3. It is hidden from screen readers and not focusable. Instead of making the entire card a link, which would cause screen readers to read all its content, only the important text (like the card title) should be a link. To make the whole card clickable, use this "Global / Card Link" component, linking both URLs to one field on the card component.

"Global / Heading" & "Global / Paragraph" Components

This component includes a rich text element and a hidden plain text element. Rich text is preferable because it supports bold, italics, and links, unlike plain text. However, plain text is useful for fields like CMS item names. Lumos provides both options to avoid unlinking the entire section component when switching text types. By default, rich text is used, and plain text is hidden. Apply component and utility classes to the parent of this component to benefit from Webflow's class renaming feature.

"Global / Eyebrow" Component

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

"Global / Content" Component

This component contains the following components: "Global / Eyebrow", "Global / Heading", "Global / Paragraph", and two "Btn / Main / With Link" components. This component is used for quickly adding content inside a section. This component has a field called Alignment with a default value of "is-left-aligned". Removing that value makes the component centered aligned.

"Btn / Play" Component

A play button element

"Btn / Main" Component

The main button structure used throughout our site. Does not contain a link block by default so that it can be used inside a html button element or parent link element

"Btn / Main / With Link" Component

Contains a link block with the "Btn / Main" component inside it. Used for when we need our button structure wrapped in a link

"Section / Starter Simple" Component

Duplicate this component before using it. This is used as a starting point for creating a new section. It contains only a section and a container.

"Section / Starter Full" Component

Duplicate this component before using it. This is used as a starting point for creating a new section. It contains a section, container, "Global / Eyebrow", "Global / Heading", "Global / Paragraph", 2 "Btn / Main / With Link" components, and 2 "Global / Visual" components.

"Button / Starter" Component

This is a <button></button> element created using a Custom Element since Webflow doesn't support the button tag natively. Unlink this component before customizing with your own content. This component serves as an easy way to access a <button></button> element. Use buttons for action elements like hamburger icons, accordion toggles, or any other clickable element that doesn't lead to a new page.

"Styles / Starter" Component

Contains an embed set to display none with <style></style> tags inside. Duplicate this component before using it. This is used for adding css inside any section component.

"Script / Starter" Component

Contains an embed set to display none. Duplicate 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.

<script>
window.addEventListener("DOMContentLoaded", (event) => {
  $(".component_wrap").each(function (index) {
    if (!$(this).hasClass("script-added")) {
      // add script here
    }
    $(this).addClass("script-added");
  });
});
</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

"Section / Example / Card" Component

Example section design using a card style. Great for CTAs. Optional background visual on the entire section or the card itself.

"Section / Example / Full" Component

Example section design covering the full screen width. Can be left aligned or centered. Full screen height or hug content. Optional background visual.