Custom attributes

HTML attributes define characteristics (i.e., the behavior or appearance) of an HTML element. For example, class is an HTML attribute that provides a way to classify similar elements, and is used with CSS to add styles to elements which share that class. href is another HTML attribute which defines a link’s destination URL.

You can create some HTML attributes using native Webflow elements, styles, and settings (e.g., links, classes, ids, etc.). You can create others using custom attributes, which are valuable for a number of use cases — creating tooltips, improving your site’s accessibility with ARIA attributes, expanding custom code and page styling capabilities with CMS data, and more.

In this lesson, you’ll learn:

1. How to create custom attributes
2. How to use CMS data in custom attributes
3. How to use component properties in custom attributes‍
4. How to style CMS data and components with the class attribute‍
5. How to manage custom attributes

Note: Some custom attributes are reserved, as you can already create them using native Webflow elements, styles, and settings. For example, you can’t add href as a custom attribute to an existing element to make it behave like a link, but you can set a link destination URL on link elements using link settings.

How to create custom attributes

To create a new custom attribute:

1. Select the element for which you want to create a custom attribute
2. Go to Element settings panel > Custom attributes
3. Click the “plus” icon
4. Enter the name of your custom attribute (e.g., title, aria-label, etc.) along with its value

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

How to use CMS data in custom attributes

You can connect your CMS data to custom attributes to bridge the gap between design, code, and dynamic data — and enable more power and flexibility in your design. This lets you control integrations or widgets that use HTML data attributes (e.g., maps or social widget previews), use custom CSS to customize page styling based on the value of a CMS field, improve site accessibility by using CMS data to populate ARIA attributes, and more.

Important: You can only connect CMS data to custom attributes on Collection pages or within Collection lists.

To connect your CMS data to custom attributes:

1. Select the element for which you want to create a custom attribute
2. Go to Element settings panel > Custom attributes
3. Click the “plus” icon
4. Enter the name of your custom attribute (e.g., title, aria-label, etc.)
5. Click the purple “dot” icon in the Value field
6. Choose the Collection field you want to connect to your custom attribute

Pro tip: You can also bind your CMS data to ID attributes, which are managed separately from custom attributes in the Element settings panel. This lets you create unique IDs to identify specific CMS items, which you can use to target those items with custom code.

How to use component properties in custom attributes

You can also connect custom attributes to component properties. You can use these, for example, to enable and manage complex styling and CMS fields. Learn more about component properties.

To connect component properties to custom attributes:

1. Edit the main component that contains the element for which you want to create a custom attribute
2. Select the element for which you want to create a custom attribute
3. Go to Element settings panel > Custom attributes
4. Click the “plus” icon
5. Enter the name of your custom attribute (e.g., title, aria-label, etc.)
6. Click the purple “dot” icon in the Value field
7. (Optional) Create a new component property
8. Choose the component property you want to connect to your custom attribute

How to style CMS data and components with the class attribute

You can use the class attribute to create style variations on CMS data and components with custom code classes or classes you’ve defined in Webflow (i.e., created in the Style panel). For example, you could use the class attribute to apply light and dark themes on card components throughout your site.

Note: The class attribute can only be used with text-based CMS data and component properties.

Note that the classes you define in Webflow (i.e., in the Style panel) are lowercase and don’t include spaces. For example, if you create a class in the Style panel called my cool class, the generated class is my-cool-class — so to reference its styles in the class attribute, you’d type my-cool-class. You can add multiple classes to the class attribute separated by spaces.

Additionally, Webflow adds an underscore to single-character classes created in the Designer (e.g., a class called c becomes _c).

Important: The Style selectors panel doesn’t recognize any classes referenced on CMS data or component properties. Before cleaning up unused styles, make sure unused classes listed in the Style selectors panel aren’t used in any custom attributes on your site.

CMS data

To style CMS data with the class attribute:

1. Select the element for which you want to create a custom attribute
2. Go to Element settings panel > Custom attributes
3. Click the “plus” icon
4. Type class in the Name field
5. Click the purple “dot” icon in the Value field
6. Choose the Collection field you want to connect to the class attribute

Note: You can only connect CMS data to custom attributes on Collection pages or within Collection lists.

Components

To style components with the class attribute:

1. Edit the main component that contains the element to which you want to add a class attribute
2. Select the element to which you want to add a class attribute
3. Go to Element settings panel > Custom attributes
4. Click the “plus” icon
5. Type class in the Name field
6. Click the purple “dot” icon in the Value field
7. (Optional) Create a new component property
8. Choose the component property you want to connect to the class attribute (e.g., “Theme”)

Then, to apply styles to this element in a component instance:  

1. Select the component instance on the canvas
2. Go to the Props panel
3. Type a class name (one you’ve defined in Webflow or in custom code) as the value for the component property bound to the class attribute (e.g., you might type dark as the value for the “Theme” component property)

Learn more about component properties.

How to manage custom attributes

To edit a custom attribute:

1. Select the element for which you want to edit a custom attribute
2. Go to Element settings panel > Custom attributes
3. Click the custom attribute you want to edit
4. Update the name and/or value of the custom attribute

To delete a custom attribute:

1. Select the element for which you want to delete a custom attribute
2. Go to Element settings panel > Custom attributes
3. Click the “trash” icon next to the custom attribute you want to delete