The States View allows you to customize block appearance for different interaction states:
Normal
Default look of the element.
Hover
Styles applied when a user hovers over the block.
In Hover State mode, almost all style settings are available — including background, border, shadow, typography, and effects. Any options that cannot be modified for hover are greyed out, indicating that they remain the same across all states.
When you adjust a setting in hover mode, it’s marked with a green dot, showing that a custom hover value has been applied. You can easily revert a property to its normal state by clicking the green dot, which will turn into a revert icon.
Tip – Inherit Hover: When you set a style in the Hover State, the effect applies only to that specific block by default.
However, if you enable the Inherit Hover option, the hover effect will also trigger when hovering over the entire parent element — not just the block itself.
This is especially useful for creating coordinated hover effects across multiple elements inside the same section — for example, making an icon and text change color together when the user hovers over their shared container.
Active
The Active State defines how a block appears when it is in an active or selected condition — for example, when a button is pressed, a tab is selected, or an element is currently engaged by the user.
In Active State mode, almost all style settings are available — including background, border, shadow, typography, and effects. Any options that cannot be modified for the active state are greyed out, indicating that they remain consistent across all states.
When you adjust a setting in active mode, it’s marked with a green dot, showing that a custom active value has been applied. You can easily revert a property to its normal state by clicking the green dot, which will change to a revert icon.
