Skip to main content
Ver. 2.2.0

Vertical Spacing

Use the design system to lay out the content on your service’s pages vertically in a uniform and consisted manner.

Component margin

The system uses margin bottom attribute on each component to manage vertical spacing and distinguishes typography ( i.e. <p>,<ul>,<ol> ), headings (i.e. <h1>,<h2>,<h3>,<h4>,<h5>,<h6>) from the rest of the components.

The following margin bottom values must be applied:

Component Type margin-bottom value
typography 16px
headings 24px
rest of components 24px

Vertical spacing with GOVCY CSS

The grid system automatically adjusts vertical spacing when using the govcy css for typography, headings and components that include the govcy-form-control class.

If you like to implement the same vertical spacing as decribed above, you can use the margin utility classes as follows

Utility Class margin-bottom value
govcy-mb-3 16px
govcy-mb-4 24px