224 Website System Docs

Components are the core building blocks of your site. With them you can build entirely new pages, or go back into existing ones to reorder sections, change content, and apply design controls like a section's colour theme or padding.

Components keep your site consistent. Each one is built once and reused, so a change to the main component shows up everywhere it's used. The system uses components for nearly everything, from headings to the navbar and footer.

Every section is built from a series of components. You start with basic elements like typography, buttons, and image components, wrap those in layout components, and finish with a section component. Depending on how your site was built, you may primarily use Open or Closed components. Both are explained below.

To browse the components available in your site, open the components panel in Webflow. For the smaller building blocks like buttons and icons, you can also see them in use on the styleguide page, and for full section layouts, the Examples page shows how they come together.

For example, say you want to add a features section to a page. Rather than building it from scratch, you'd find a features section component, drop it onto the page, and update its properties to swap in your own headings and copy. The layout, spacing, and responsiveness are already handled.

Understanding Component Properties

Component properties let you modify specific aspects of a component instance, like text content, an image, or a layout or colour theme. If a component has many properties, they are sorted by the aspect they update (for example Styles, Heading, Paragraph, Image).

To edit a content property such as a heading or image:

1. Locate the component instance that contains the element you want to modify.
2. Select the element on the canvas.
3. On the right side of the designer you'll see a properties panel. Most section components have a large number of properties sorted into dropdowns. Open and close these to focus on the property type you want to update.
4. Modify the element's property values (update the text, replace an image, set visibility, and so on).

Updating Styles Within a Component

The system lets you update visual styles within some components using component properties. Each property has a name, and often a placeholder, so use that to understand what changing it will do. For example, updating a heading from h3 to h1 changes how the heading looks. The most important style properties are set up using component variant dropdowns. This makes it easy to see your options and avoid unintended changes.

A common one: most section components have a Colour Theme property. Switching it from Light to Dark flips that section's background and text together in a single click, with no manual restyling.

Other custom properties let you select a CSS class for a specific use case, such as changing a border radius or max width. To see all the possible classes for each use case, check the styleguide.

Try the properties to see what each one changes. Not sure which class to use? Ask your AI agent what would work here, or check your Styleguide page to see the main classes and what each one does. If an override has no visible effect, clear it rather than leaving it in place: typing something like dark or 10 into a Class property does nothing if that option doesn't exist. Click the property's blue label to reset it to its default.

Component Slots

Some components let you place other components inside them for extra flexibility, like putting a set of cards into a section. To do this, drag a component from the sidebar onto the canvas and rearrange as needed, or copy and paste an existing component to create more.

Webflow will let you put any component inside a slot, but not all slots suit all components. For example, sections should not go inside other sections. To make this clear, components are divided in the sidebar by their role.

If a component is meant to hold a specific other component, the slot is named accordingly. A Tabs component is built to hold Tab Links, so it has a slot named Tab Links.

The Two Main Component Setups

Closed Components

Closed components are used where a component should be the same everywhere it appears on your site. When it's updated, every instance across the site picks up the change. Your navbar and footer are examples.

Open Components

Open components are how you build sections from scratch, combining several layers of components into a custom section with unique content.

Open components allow more customised layouts when you need a unique section or set of content. They take a bit more knowledge of how sections are structured, and a change to one won't flow across the site the way a closed component's will.

When building sections with open components, use the following structure as a general guide and customise from there.

Simple Content Section structure

• Section
  • Layout
    • Column 1 Slot
      • Eyebrow
      • Heading
      • Paragraph
      • Button Wrapper
        • Button
    • Column 2 Slot
      • Visual Image or Visual Video
      • Visual Overlay (optional)

Component Naming Conventions

Components have different types of names based on how they are used, and they are grouped by function in the component panel. The most common keywords are explained below.

• Section. Prebuilt sections you can drop onto a page, with specific style controls. They help you quickly fill out new pages with prebuilt responsive designs.
• Layout. More specific layouts than the default Grid component, built to be reusable inside other open components.
• Card. Elements used inside a component slot, giving you flexibility over how much content sits inside each component.
• Icon. Icon elements. They can be dropped into icon cards or list items.
• Form. Any element related to a form. Use the Form component and drop fields into it to create a custom form.
• CMS. Collection lists turned into components so they can be used inside other components, such as sliders, tabs, or open sections.

Editing a Main Component

To make the same change across all instances of a component, you need to edit the main component. You can do this from any component instance by:

• Double-clicking the component instance
• Right-clicking the instance and choosing Edit component
• Selecting the instance and clicking the pencil icon in the label
• Selecting the instance and clicking Edit component in the Style, Element settings, or Interactions panels
• Selecting the instance and pressing Enter

When you do this, all other elements on the page get a dark overlay, showing you are updating the main component and that any change will affect every instance.

Collections are the Webflow CMS. They let you manage dynamic, repeatable content like blog posts, case studies, team members, or job listings, so you can add and update content without rebuilding pages every time.

Each collection has a set of fields (like title, slug, body, image, date) that define the structure of every item inside it. When you add a new item, it slots into that structure and appears on your site wherever the collection is referenced.

Day to day, you'll use the Webflow Builder or the CMS panel in the Designer to add new items, edit existing ones, or archive content you no longer need.

The most common day-to-day example is publishing a blog post. You'd open the Blog collection, create a new item, fill in the fields (title, body, featured image, author, publish date), preview how it looks, then publish. The post automatically appears anywhere that collection is referenced on your site, like your blog index and any related-posts sections.

Utility classes are pre-built styling controls in your system, all prefixed with u- (for example u-gap-4). Components use them behind the scenes to keep spacing, sizing, and layout consistent. You'll mostly encounter them rather than create them. It's useful to recognise what they are so the system makes sense, but adding or changing classes yourself is rarely needed and easy to get wrong.

All the utility styles on your site can be viewed on the styleguide page. If you're not sure what a class does, ask your AI agent.

To make utility classes easier to use, we recommend the Lumos Chrome extension, which makes component class selectors easier to read.

How to Use Utility Classes in a Component

When a component has a property for utility classes, it includes the word Class, sometimes with a descriptor for a more specific role like Grid Classes. To update the utility classes, click into the property and type u- to see a list of classes you can add.

Context matters here. You don't want to add a gap class to a typography element. Pay attention to the kind of element you're working with and keep the default classes in mind. For example, if a layout has a u-gap-4 utility, click into it and backspace until it reads u-gap- to see your other gap options.

Variables are the foundation your whole system is built on, the master settings for things like colours, font styles, and your site's max width. Because they control your site globally, this is the one part of the system you'll rarely, if ever, need to touch.

If you go through a rebrand or need a minor design change (like updating your h6 font style from medium to bold), this is where it's made.

Open the Variables panel in Webflow to see how yours are set up.

Adding it to a page

Each HubSpot form on a page gets one loader.

1. Open the page with your HubSpot form.
2. Add the component. In the components panel, find Hubspot Form Loader in the Form group and drop it immediately above your Hubspot Form Embed component. It's invisible, so it won't change your layout. Keeping the two together makes it easy to see which loader belongs to which form.
3. Fill in the Form ID. Select the component and paste your Form ID into the Form ID property. See below for where to find it.
4. Fill in the Height. Enter the form's height as a number only, like 423. No px on the end.
5. Preview and publish.

If a page has two forms, add two loaders, one immediately above each form, and give each its own Form ID and Height.

Where to find your Form ID

1. In HubSpot, go to Marketing > Forms.
2. Hover over your form and click Edit.
3. In the top right, click Review and update, then Update, then Get embed code.
4. In the embed code, look for data-form-id="...". The Form ID is the long string of letters, numbers and hyphens inside the quotes. It looks like this: d32746b4-4dc8-4c86-9568-321525c26743

Copy only the ID, without the quotes. HubSpot's menus change from time to time, so if those steps don't match what you see, their guide to embedding a form should have the latest.

Finding the Height

The height is how tall your form is once it has loaded, in pixels. The easiest way to get it is to ask us. Send the page link to support@224industries.com.au and we'll send the number back.

In the meantime you can leave Height at its default of 420. That suits a typical form with around five fields and a button. If your form is much shorter or longer than that, the page may still move a little when the form appears, so it's worth updating the number.

Which HubSpot forms this works with

HubSpot has two form editors, and the loader is built for forms made in the newer one. You can usually tell from the embed code:

• A newer form's embed code includes hs-form-frame. The loader works with these.
• An older (legacy) form's embed code includes hbspt.forms.create. The loader won't do anything for these. The form still works as normal, it just loads the way it used to.

If you're not sure which one you have, email the embed code to support and they'll check.

Good to know

• If you forget the loader, your form still works and submissions still come through. You'll just see the gap and the small jump while it loads.
• If the Form ID is blank or has a typo, your page still works. The loader falls back to the default height of 420, so double-check the ID if the placeholder looks the wrong size.
• The placeholder is a general shape, a few grey bars for fields and a button. It's not an exact copy of your form. If your form looks very different and you'd like a closer match, email support and it can be adjusted.
• If HubSpot doesn't load at all, for example when a visitor's browser blocks it, the placeholder is designed to clear itself after about 12 seconds so there's no empty grey block left behind.