Lumo Sizing and Spacing
Lumo defines a set of CSS custom properties you can use to apply consistent sizing and spacing across your application.
Size
Use these properties to adjust the sizing of regular elements (buttons, text fields, list items).
M is the standard size, and it is primarily used to size buttons, text fields and list items. If you adjust the sizing, make sure to keep it large enough for touch targets.
See Icons for properties that affect the sizing of icons.
- --lumo-size-xs:
1.625rem - --lumo-size-s:
1.875rem - --lumo-size-m:
2.25rem - --lumo-size-l:
2.75rem - --lumo-size-xl:
3.5rem
Space
Use these properties to adjust the inter-component spacings: the 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.
- --lumo-space-xs:
0.25rem - --lumo-space-s:
0.5rem - --lumo-space-m:
1rem - --lumo-space-l:
1.5rem - --lumo-space-xl:
2.5rem
Wide
Use these properties for margin or padding to have a bigger horizontal space than vertical space.
- --lumo-space-wide-xs:
calc( 0.25rem / 2) 0.25rem - --lumo-space-wide-s:
calc( 0.5rem / 2) 0.5rem - --lumo-space-wide-m:
calc( 1rem / 2) 1rem - --lumo-space-wide-l:
calc( 1.5rem / 2) 1.5rem - --lumo-space-wide-xl:
calc( 2.5rem / 2) 2.5rem
Tall
Use these properties for margin or padding to have a bigger vertical space than horizontal space.
- --lumo-space-tall-xs:
0.25rem calc( 0.25rem / 2) - --lumo-space-tall-s:
0.5rem calc( 0.5rem / 2) - --lumo-space-tall-m:
1rem calc( 1rem / 2) - --lumo-space-tall-l:
1.5rem calc( 1.5rem / 2) - --lumo-space-tall-xl:
2.5rem calc( 2.5rem / 2)
Examples
Sizing
<span class="size-xs">XS</span>
<span class="size-s">S</span>
<span class="size-m">M</span>
<span class="size-l">L</span>
<span class="size-xl">XL</span>
<custom-style>
<style>
.size-xs {
width: var(--lumo-size-xs);
height: var(--lumo-size-xs);
}
.size-s {
width: var(--lumo-size-s);
height: var(--lumo-size-s);
}
.size-m {
width: var(--lumo-size-m);
height: var(--lumo-size-m);
}
.size-l {
width: var(--lumo-size-l);
height: var(--lumo-size-l);
}
.size-xl {
width: var(--lumo-size-xl);
height: var(--lumo-size-xl);
}
</style>
</custom-style>Spacing
Uniform
<span class="space-xs">XS</span>
<span class="space-s">S</span>
<span class="space-m">M</span>
<span class="space-l">L</span>
<span class="space-xl">XL</span>
<custom-style>
<style>
.space-xs {
padding: var(--lumo-space-xs);
}
.space-s {
padding: var(--lumo-space-s);
}
.space-m {
padding: var(--lumo-space-m);
}
.space-l {
padding: var(--lumo-space-l);
}
.space-xl {
padding: var(--lumo-space-xl);
}
</style>
</custom-style>Wide
<span class="space-wide-xs">XS</span>
<span class="space-wide-s">S</span>
<span class="space-wide-m">M</span>
<span class="space-wide-l">L</span>
<span class="space-wide-xl">XL</span>
<custom-style>
<style>
.space-wide-xs {
padding: var(--lumo-space-wide-xs);
}
.space-wide-s {
padding: var(--lumo-space-wide-s);
}
.space-wide-m {
padding: var(--lumo-space-wide-m);
}
.space-wide-l {
padding: var(--lumo-space-wide-l);
}
.space-wide-xl {
padding: var(--lumo-space-wide-xl);
}
</style>
</custom-style>Tall
<span class="space-tall-xs">XS</span>
<span class="space-tall-s">S</span>
<span class="space-tall-m">M</span>
<span class="space-tall-l">L</span>
<span class="space-tall-xl">XL</span>
<custom-style>
<style>
.space-tall-xs {
padding: var(--lumo-space-tall-xs);
}
.space-tall-s {
padding: var(--lumo-space-tall-s);
}
.space-tall-m {
padding: var(--lumo-space-tall-m);
}
.space-tall-l {
padding: var(--lumo-space-tall-l);
}
.space-tall-xl {
padding: var(--lumo-space-tall-xl);
}
</style>
</custom-style>E0B7EF54-50D7-4FC6-B255-D508B681B38C