Components are the building blocks of every Lumos project, by turning every core element into a component we are able to have the following advantages:

1. Global control over key structures and styles allowing for greater consistency.
2. Greater ease to change styles or layouts across multiple pages.
3. Allow clients or less technically minded team members to be able to build pages with pre-built blocks that we have developed.

<aside> <img src="/icons/error_gray.svg" alt="/icons/error_gray.svg" width="40px" />

This guide assumes you know how to create components in Webflow. If you are new to components. We’d recommend learning the basics about that before diving into the Lumos approach.

</aside>

Components Strategy

Section can be setup in two different ways. The Lumos starter primarily uses open components but you can use these to create closed components when needed.

Open Components

Mainly uses component slots, allowing any element to be added or removed

Ideal for workflow speed and flexibility

Closed Components

Mainly uses component props to conditionally hide and show elements

Ideal for storing content that should be the same across every page

Open Components

Open Components are the default way to build sections in Lumos and give the most flexibility. They allow elements to be freely added or removed and allow clients to reuse layouts in multiple ways throughout the website.

Closed Components

Closed Components are the more rigid approach but are required when we want content or structure to stay consistent across multiple pages. Examples include a modal with a contact form where the fields should be the same on every page, or a CTA section where the heading and button text should be consistent on all pages. When building a closed component, it’s recommended to start by building it as an open component first so that the layout can be used in other ways if needed, and then turn that open component into a closed one by wrapping it in a div and turning the parent div into a component.

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