We’ve heard your feedback on how cool it would be to be able to use dynamic data on CMS Collection pages to make custom code and HTML attributes even more powerful – we’re excited to tell you that you can now bind CMS data fields or component properties to custom attributes or element IDs.

Examples of using dynamic data in custom attributes – 

• Improve your site’s accessibility by using data to populate ARIA attributes and other hooks.
• Use CMS data to control integrations or widgets that use HTML data attributes, like maps or social media previews.
• Give editors ways to set attributes using component properties, enabling technical control without the complexity or worrying they’ll break the site.
• Customize page styling based on a field value, using custom CSS. For example, different categories of your blog can look different by binding a Category field to an attribute, then using an attribute selector in your CSS like div[data-category]. #IYKYK
• Or anything else you can think of!

In short, utilizing attributes alongside your CMS further bridges the gap between design, code, and dynamic data – offering power and flexibility to the websites you create. What are some additional ways you’ll use this new capability? Join the conversation here and let us know!

‍

Update: …and just like that, data bindings now also work in Collection lists and nested Collections!