The Style Indicator is a useful tool to understand where the style of an element originates from — which is usually the main layout (e.g. desktop).
Note: The Style Indicator can also help you to see if your shared styles are correctly updated
There are three main style states:
Style State | Description |
Default | Indicated by a ⚪️ grey-colored icon in the Style Panel. This means the style is the default when you first add elements to the canvas. |
Custom | Indicated by a 🟡 yellow-colored icon in the Style Panel. This means the style of an element is different or 'custom' from the inherited or default style. |
Inherited | Indicated by a 🟢 green-colored icon in the Style Panel. This means the style originates from the main layout. |
Rather than using multiple layouts and adjusting each element – which can take hours – use the style indicator to reduce the number of adjustments needed to make your content fully responsive. You can use sizing values like automatic sizing and the style indicator to create responsive content based on a single layout.
Best practices
On the main layout (e.g. desktop) the style indicator will remain 🟡 yellow which indicates a custom style for elements
However, when adjusting the design on tablet and mobile (secondary layouts), you want to try to make these styles 🟢 inherited or ⚪️ default
To accomplish this, use size values like percentages or automatic sizing which will allow elements to size correctly on different breakpoints; instead of relying on pixel size which will need to be 🟡 custom adjusted to each layout