Expand functionality with advanced attributes

With additional data, you can add attributes of any kind to blocks, pages and sub-blocks on RevasOS. This way, you can use custom styling or scripts to expand the functionality and behavior of your website.

The advanced attributes you can add are:

• id
• data- attributes
• class
• style

How to add them

To add advanced attributes, follow the guide on additional data

id

A unique identifier assigned to a single HTML element. ids allow you to select and edit specific elements via CSS or JavaScript.

<div id="hero-banner">Welcome!</div> → Styling can be applied with #hero-banner { color: red; }

data- attributes

Custom attributes that allow you to store extra data in HTML elements. Useful for passing information to JavaScript without altering the visible content.

<button data-product-id="123">Buy</button> → JavaScript can read it with button.dataset.productId or you can use a custom style if the attribute has a certain value [data-product-id="123"] { color: red; }

class

An attribute that assigns one or more class names to an element. Allows you to apply CSS styles to groups of elements and select them with JavaScript.

<p class="highlighted-text">Warning!</p> → Styled with .highlighted-text { background: yellow; }

style

An attribute that allows you to directly apply CSS styles to an element. Useful for quick or inline changes, but not recommended for structured design management.

<h1 style="color: blue;">Blue Title</h1> → Changes the title color without external CSS.