Density

Density scaling is a feature that enables a recommended value of margins depending on resolution and/or device.

Short description

Density scaling aims to adapt the margins of all UI components in a viewport depending on resolution and/or device. This feature is inherited from the responsive UI values and is applied automatically.

Behaviour

Every component in the SEB UI should inherit the already set margin values for each resolution and/or device, thus being able to utilise the available space in the best way possible.

Recommended values

  • Desktop: 32px
  • Tablet: 24px
  • Mobile: 16px

Related to

  • Grid
  • Typography

Breakpoints