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: