How to use style indicators
Yoki Kahsay avatar
Written by Yoki Kahsay
Updated over a week ago

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

Did this answer your question?