Vspace

Basic example

The elements inside the following Vspace element will have an earth size margin separating them on the vertical axis (earth is default):

spacing prop

As spacing is delegated from the parent Vspace, it is easy to increase the spacing using spacing, which accepts a string from the space modular scale. This example has the spacing prop sun.

If you require different values to be used for different breakpoints, you can also pass an object with keys s, m, l, _ - where _ is a default value, and the other keys are optional corresponding to small, medium and large breakpoints.

With per breakpoint spacing:

Nesting

You can quickly divide the flow content into visually distinct sections, by nesting Vspace elements. In the following, the two 'sections' are separated by a space of the saturn spacing, while elements within each of the two sections are spaced using the default earth spacing.

Overrides

Some components, such as the Text component, take their own spacing prop, allowing you to override the generic spacing within a Vspace on a per-element basis.

padding prop

In addition, there is a padding prop which lets you add left padding on Vspace elements. It is unlikely you will need this in most cases, since parent components take care of margins and padding for you. The padding prop also takes a modular scale space string.

If you require different values to be used for different breakpoints, you can also pass an object with keys s, m, l, _ - where _ is a default value, and the other keys are optional corresponding to small, medium and large breakpoints.

With per breakpoint padding: