Skip to main content

How to use style indicators

Ulrik Topholm Jepsen avatar
Written by Ulrik Topholm Jepsen
Updated over 3 months 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?