Jump to main content

Vertical spacing


The .u-sv set of utility classes adjusts the space after an element in positive or negative multiples of the baseline grid unit. A baseline grid unit is equivalent to .5rem.

For example, to pull the next element 1rem closer, apply .u-sv-2. To push it .5rem away from the current element, apply u-sv1.

Throughout Vanilla, margin is only applied to the bottom of an element. If elements beneath an element using this utility have a top margin applied, there is a risk of margin collapse. For predictable results, use single margin direction.

These classes should be used sparingly, and exist to give designers greater flexibility when it comes to spacing and alignment.

Do:

Use u-sv classes to modify space between elements that are not part of Vanilla components.

Don't:

Use u-sv to modify the space between elements inside of Vanilla components.

Variable Effect
.u-sv-3 Decreases space by 3 baseline grid units
.u-sv-2 Decreases space by 2 baseline grid units
.u-sv-1 Decreases space by 1 baseline grid unit
.u-sv1 Increases space by 1 baseline grid unit
.u-sv2 Increases space by 2 baseline grid units
.u-sv3 Increases space by 3 baseline grid units

Import

To import just this utility into your project, copy the snippet below and include it in your main Sass file.

// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;

@include vf-u-vertical-spacing;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.