Valo

Sizing and spacing

The theme defines a set of CSS custom properties you can use to apply consistent sizing and spacing across your application.

Sizing

Use these properties to adjust the sizing of regular elements (buttons, text fields, list items).

Spacing

Use these properties to adjust the inter-component spacings, i.e. space outside a regular component (button, text field) or inside a container component (layouts, grid cells)

Uniform

Use these properties for margin or padding in a single direction or uniformly on all sides.

Wide

Use these properties for margin or padding to have a bigger horizontal space than vertical space.

Tall

Use these properties for margin or padding to have a bigger vertical space than horizontal space.

Custom properties

Size

--valo-size-xl

--valo-size-l

--valo-size-m

--valo-size-s

--valo-size-xs

--valo-size-xxs

--valo-size-xxxs

Space

--valo-space-xl

--valo-space-l

--valo-space-m

--valo-space-s

--valo-space-xs

--valo-space-xxs

Space, wide

--valo-space-wide-xl

--valo-space-wide-l

--valo-space-wide-m

--valo-space-wide-s

--valo-space-wide-xs

--valo-space-wide-xxs

Space, tall

--valo-space-tall-xl

--valo-space-tall-l

--valo-space-tall-m

--valo-space-tall-s

--valo-space-tall-xs

--valo-space-tall-xxs