Skip to main content

Spacings

The Library uses root elements' font-size (rem) to scale specific values. Due to the fact that Apps could use a smaller or bigger font - size on the html element, we use a factor in order to scale accordingly. It defaults to 1 and is stored as CSS Variable --duil310-dui-size-theme.

note

The DHL User Interface Library Space system is designed using relative (rem) values and use the default 16px base font-size to calculate space token sizing.

To accommodate projects with different base, the DHL User Interface Library automagically applies the correct scaling based on the project's set base font-size.

For fine-tuned control, the --duil310-dui-size-theme CSS variable can be set as needed to calculate space values. This variable, which defaults to 1, scales each space design token proportionally to suit your specific requirements.

space​

Variable namevalue 1value 2Example