Spacing Utilities

Provide spacing between components using margins or inside the components using paddings.

Usage

Spacing utilities are used to provide spacing between components using margins or inside the components using paddings. Different sizes allow you to easily construct consistent layouts of components.

This a simple card with small padding and small margin to the right.

This a simple card with medium padding and small margin to left

<div class="c-card u-p-small u-mr-small">
    This a simple card with small padding and small margin to the right.
</div>
    
<div class="c-card u-p-medium u-ml-small">
    This a simple card with medium padding and small margin to left
</div>

Margin

Use margin utilities to provide space around an elemnent to any direction.

Usage: u-m{direction}-{size}

Sizes:

u-m{direction}-xsmall
u-m{direction}-small
u-m{direction}-medium
u-m{direction}-large
u-m{direction}-xlarge

Directions:

u-m-{size} All sides.
u-mt-{size} Margin top
u-mr-{size} Margin right
u-mb-{size} Margin bottom
u-ml-{size} Margin left
u-mv-{size} Margin top & bottom (vertically)
u-mh-{size} Margin right & left (horizontaly)

<!-- Adds small margin to the right -->
<div class="u-mr-small">...</div> 

<!-- Adds large margin to all directions -->
<div class="u-m-large">...</div> 

<!-- Adds medium margin to the left -->
<div class="u-ml-medium">...</div> 

<!-- Adds extra small margin to the top -->
<div class="u-mt-xsmall">...</div>

<!-- Adds extra large margin to the bottom -->
<div class="u-mb-xlarge">...</div>

Padding

Use padding utilities to provide space inside elements to any direction.

Usage: u-p{direction}-{size}

Sizes:

u-p{direction}-xsmall
u-p{direction}-small
u-p{direction}-medium
u-p{direction}-large
u-p{direction}-xlarge

Directions:

u-p-{size} All sides.
u-pt-{size} Padding top
u-pr-{size} Padding right
u-pb-{size} Padding bottom
u-pl-{size} Padding left
u-pv-{size} Padding top & bottom (vertically)
u-ph-{size} Padding right & left (horizontaly)

<!-- Adds small padding to the right -->
<div class="u-pr-small">...</div> 

<!-- Adds large padding to all directions -->
<div class="u-p-large">...</div> 

<!-- Adds medium padding to the left -->
<div class="u-pl-medium">...</div> 

<!-- Adds extra small padding to the top -->
<div class="u-pt-xsmall">...</div>

<!-- Adds extra large padding to the bottom -->
<div class="u-pb-xlarge">...</div>