Theming: Whitespace

Properties

Whitespace can be applied using three different properties: Margin, Padding and Spacing.

If you use HorizontalLayout or VerticalLayout you can use setMargin(true), setPadding(true) and setSpacing(true).

However, these methods aren’t available for Div, FlexLayout or any other container. The Business App Starter enables you to apply margin, padding and spacing on any Component using class names.

Sizes

There are five different sizes: XS, S, M (default), L and XL.

Directions

And nine different directions: BOTTOM, LEFT, RIGHT, TOP, HORIZONTAL, VERTICAL, TALL, UNIFORM (default) and WIDE.

Example

Use the following formula to apply margin, padding, or spacing: component.addClassName(LumoStyles.<PROPERTY>.<DIRECTION>.<SIZE>).

Example 1

component.addClassName(LumoStyles.Padding.Uniform.M);

Example 2

Apply multiple styles at once using addClassNames:

component.addClassNames(
  LumoStyles.Margin.Horizontal.XL
  LumoStyles.Padding.Vertical.XL,
  LumoStyles.Spacing.Bottom.M
);

Cheatsheet

Horizontal

Horizontal is shorthand for applying margin, padding and spacing on the left and right.

Margin

addClassName(**LumoStyles.Margin.Horizontal.XS**);
addClassName(**LumoStyles.Margin.Horizontal.S**);
addClassName(**LumoStyles.Margin.Horizontal.M**);
addClassName(**LumoStyles.Margin.Horizontal.L**);
addClassName(**LumoStyles.Margin.Horizontal.XL**);

Padding

addClassName(**LumoStyles.Padding.Horizontal.XS**);
addClassName(**LumoStyles.Padding.Horizontal.S**);
addClassName(**LumoStyles.Padding.Horizontal.M**);
addClassName(**LumoStyles.Padding.Horizontal.L**);
addClassName(**LumoStyles.Padding.Horizontal.XL**);

Spacing

addClassName(**LumoStyles.Spacing.Horizontal.XS**);
addClassName(**LumoStyles.Spacing.Horizontal.S**);
addClassName(**LumoStyles.Spacing.Horizontal.M**);
addClassName(**LumoStyles.Spacing.Horizontal.L**);
addClassName(**LumoStyles.Spacing.Horizontal.XL**);

Vertical

Vertical is shorthand for applying margin, padding and spacing on the bottom and top.

Margin

addClassName(**LumoStyles.Margin.Vertical.XS**);
addClassName(**LumoStyles.Margin.Vertical.S**);
addClassName(**LumoStyles.Margin.Vertical.M**);
addClassName(**LumoStyles.Margin.Vertical.L**);
addClassName(**LumoStyles.Margin.Vertical.XL**);

Padding

addClassName(**LumoStyles.Padding.Vertical.XS**);
addClassName(**LumoStyles.Padding.Vertical.S**);
addClassName(**LumoStyles.Padding.Vertical.M**);
addClassName(**LumoStyles.Padding.Vertical.L**);
addClassName(**LumoStyles.Padding.Vertical.XL**);

Spacing

addClassName(**LumoStyles.Spacing.Vertical.XS**);
addClassName(**LumoStyles.Spacing.Vertical.S**);
addClassName(**LumoStyles.Spacing.Vertical.M**);
addClassName(**LumoStyles.Spacing.Vertical.L**);
addClassName(**LumoStyles.Spacing.Vertical.XL**);

Tall

Margin, padding or spacing that has bigger vertical space than horizontal space.

Margin

addClassName(**LumoStyles.Margin.Tall.XS**);
addClassName(**LumoStyles.Margin.Tall.S**);
addClassName(**LumoStyles.Margin.Tall.M**);
addClassName(**LumoStyles.Margin.Tall.L**);
addClassName(**LumoStyles.Margin.Tall.XL**);

Padding

addClassName(**LumoStyles.Padding.Tall.XS**);
addClassName(**LumoStyles.Padding.Tall.S**);
addClassName(**LumoStyles.Padding.Tall.M**);
addClassName(**LumoStyles.Padding.Tall.L**);
addClassName(**LumoStyles.Padding.Tall.XL**);

Spacing

addClassName(**LumoStyles.Spacing.Tall.XS**);
addClassName(**LumoStyles.Spacing.Tall.S**);
addClassName(**LumoStyles.Spacing.Tall.M**);
addClassName(**LumoStyles.Spacing.Tall.L**);
addClassName(**LumoStyles.Spacing.Tall.XL**);

Uniform

An equal amount of margin, padding and spacing in all directions.

Margin

addClassName(**LumoStyles.Margin.Uniform.XS**);
addClassName(**LumoStyles.Margin.Uniform.S**);
addClassName(**LumoStyles.Margin.Uniform.M**);
addClassName(**LumoStyles.Margin.Uniform.L**);
addClassName(**LumoStyles.Margin.Uniform.XL**);

Padding

addClassName(**LumoStyles.Padding.Uniform.XS**);
addClassName(**LumoStyles.Padding.Uniform.S**);
addClassName(**LumoStyles.Padding.Uniform.M**);
addClassName(**LumoStyles.Padding.Uniform.L**);
addClassName(**LumoStyles.Padding.Uniform.XL**);

Spacing

addClassName(**LumoStyles.Spacing.Uniform.XS**);
addClassName(**LumoStyles.Spacing.Uniform.S**);
addClassName(**LumoStyles.Spacing.Uniform.M**);
addClassName(**LumoStyles.Spacing.Uniform.L**);
addClassName(**LumoStyles.Spacing.Uniform.XL**);

Wide

Margin, padding or spacing that has bigger horizontal space than vertical space.

Margin

addClassName(**LumoStyles.Margin.Wide.XS**);
addClassName(**LumoStyles.Margin.Wide.S**);
addClassName(**LumoStyles.Margin.Wide.M**);
addClassName(**LumoStyles.Margin.Wide.L**);
addClassName(**LumoStyles.Margin.Wide.XL**);

Padding

addClassName(**LumoStyles.Padding.Wide.XS**);
addClassName(**LumoStyles.Padding.Wide.S**);
addClassName(**LumoStyles.Padding.Wide.M**);
addClassName(**LumoStyles.Padding.Wide.L**);
addClassName(**LumoStyles.Padding.Wide.XL**);

Spacing

addClassName(**LumoStyles.Spacing.Wide.XS**);
addClassName(**LumoStyles.Spacing.Wide.S**);
addClassName(**LumoStyles.Spacing.Wide.M**);
addClassName(**LumoStyles.Spacing.Wide.L**);
addClassName(**LumoStyles.Spacing.Wide.XL**);

Updated 2021-03-08  Edit this article