Custom properties

HTML properties define attributes (i.e., the behavior or look) of an HTML element. For instance, category is an HTML trait that provides a method to classify similar elements, and is employed with CSS to include styles to elements that share that category. url is another HTML trait that specifies a link’s target URL.

You can produce some HTML properties using native Webflow elements, styles, and configurations (e.g., links, categories, ids, etc.). You can develop others using custom properties, which are beneficial for a variety of purposes — building tooltips, boosting your site’s accessibility with ARIA characteristics, expanding custom code and page styling capabilities with CMS data, and more.

Throughout this tutorial, you will understand:

1. How to craft custom properties
2. How to utilize CMS data in custom properties
3. How to utilize component features in custom properties
4. How to design components and CMS data with the category property
5. How to control custom properties

Remember: Some custom properties are reserved, as you are already able to generate them using native Webflow elements, styles, and configurations. For example, you can’t designate url as a custom property to an existing element to mimic a link, but you can define a link target URL on link elements using link settings.

How to craft custom properties

To formulate a new custom property:

1. Select the element for which you wish to create a custom property
2. Head over to Element settings panel > Custom properties
3. Press the “plus” icon
4. Enter the title of your custom property (e.g., tooltip, aria-label, etc.) along with its content

Pro tip: You can access a complete list of HTML attributes in the Mozilla HTML attribute reference.

How to utilize CMS data in custom properties

You can link your CMS data to custom properties to form a connection between design, code, and dynamic data — and empower more strength and flexibility in your design. This enables you to manage integrations or widgets that utilize HTML data properties (e.g., maps or social widget previews), employ custom CSS to adjust page styling based on the value of a CMS field, enhance site accessibility by employing CMS data to populate ARIA properties, and more.

Essential: You can exclusively link CMS data to custom properties on Collection pages or within Collection lists.

To link your CMS data to custom properties:

1. Select the element for which you want to craft a custom property
2. Visit Element settings panel > Custom properties
3. Click the “plus” icon
4. Enter the title of your custom property (e.g., tooltip, aria-label, etc.)
5. Click the violet “dot” icon in the content field
6. Choose the Collection field you desire to link to your custom property

Pro tip: You can also attach your CMS data to ID properties, which are handled separately from custom properties in the Element settings panel. This allows you to set up unique IDs to recognize specific CMS items, which you can utilize to target those items with custom code.

How to utilize component attributes in custom properties

You can also relate custom properties to component attributes. These can be utilized, for example, to facilitate and regulate complex styling and CMS fields. Discover more about component attributes.

To connect component attributes to custom properties:

1. Modify the primary component that embraces the element for which you want to craft a custom property
2. Select the element for which you want to forge a custom property
3. Go to Element settings panel > Custom properties
4. Click the “plus” icon
5. Enter the title of your custom property (e.g., tooltip, aria-label, etc.)
6. Click the violet “dot” icon in the content field
7. (Optional) Establish a new component attribute
8. Choose the component attribute you want to link to your custom property

How to design CMS data and components with the category attribute

You can apply the category attribute to generate style variations on CMS data and components with custom code classes or classes you’ve established in Webflow (i.e., crafted in the Styling panel). For example, you could apply the category attribute to employ light and dark themes on card components throughout your site.

Remember: The category attribute can solely be utilized with text-based CMS data and component attributes.

Note that the classes you devise in Webflow are lowercase and exclude spaces. For instance, if you generate a class in the Styling panel known as my awesome class, the derived class is my-awesome-class — thus to reference its styles in the category attribute, you would input my-awesome-class.

Moreover, Webflow adds an underscore to single-letter classes produced in the Designer (e.g., a class named c turns into _c).

Essential: The Style selectors panel doesn’t recognize any classes referenced on CMS data or component attributes. Before clearing out unused styles, make certain unused classes listedin the Panel of Style selectors, they are not utilized in any custom attributes on your website.

Data of Content Management System

To customize CMS data with the class attribute:

1. Choose the element for which you desire to generate a specialized attribute
2. Head to Panel of Element settings > Special attributes
3. Tap on the “add” symbol
4. Insert class into the Identifier section
5. Tap on the purple “dot” symbol within the Value section
6. Select the Collection section which you desire to link to the class attribute

Reminder: You are only able to associate CMS data with customized attributes on Collection pages or inside Collection lists.

Elements

To customize components with the class attribute:

1. Edit the primary component that encompasses the element in which you want to include a class attribute
2. Select the element where you wish to incorporate a class attribute
3. Proceed to Panel of Element settings > Special attributes
4. Tap on the “add” symbol
5. Insert class into the Identifier section
6. Tap on the purple “dot” symbol in the Value section
7. (Optional) Form a fresh aspect of the component
8. Select the feature of the component you wish to connect to the class attribute (e.g., “Theme”)

After that, to apply styles to this element within a component instance:  

1. Select the component instance on the canvas
2. Access the Panel of Props
3. Insert a class title (one you’ve specified in Webflow or in tailored code) as the content for the component feature attached to the class attribute (e.g., you could insert dark as the content for the “Theme” component feature)

Explore further into component aspects.

Techniques to handle bespoke attributes

To amend a customized attribute:

1. Select the element where you need to revise a customized attribute
2. Head to Panel of Element settings > Special attributes
3. Tap on the customized attribute you wish to amend
4. Renew the identifier and/or contents of the customized attribute

To erase a customized attribute:

1. Select the element where you seek to remove a customized attribute
2. Access the Panel of Element settings > Special attributes
3. Tap on the “garbage bin” symbol adjacent to the customized attribute you intend to erase