Skip to main content

How to use style indicators

Jørgen Wigum Lurvik avatar
Written by Jørgen Wigum Lurvik
Updated over 2 weeks ago

The Style Indicator helps you see where an element’s style comes from, usually the main layout (like desktop).

Tip: It also shows if your shared styles are updated correctly.

Style States

There are three main style states:

  • Default (⚪️): The original style when you first add an element.

  • Custom (🟡): The style has been changed from the default or inherited style.

  • Inherited (🟢): The style comes from the main layout.

Using the Style Indicator for Responsiveness

Instead of adjusting each element in multiple layouts, use the style indicator to make your content responsive with less work. Use automatic sizing and sizing values like percentages for responsive design, based on a single layout.

Best Practices

  • On the main layout (e.g. desktop), styles will be custom (🟡).

  • On tablet and mobile layouts, try to use inherited (🟢) or default (⚪️) styles.

  • Use percentages or automatic sizing instead of pixel sizes to make your elements adjust smoothly across different devices.

Did this answer your question?