Padding

The padding component styles an element with some padding.

Class What it does?
padding Styles an element with padding of 0.8rem.
padding--s Styles an element with padding of 0.4rem.
padding--l Styles an element with equal padding of 1.6rem.
padding--xl Styles an element with equal padding of 2.4rem.
padding--xxl Styles an element with equal padding of 3.2rem.
padding--xxxl Styles an element with equal padding of 4rem.

 

Examples

To easily show the padding, we are using the border component for these examples:

.padding

butterfly image using class: padding

<img alt="butterfly" class="border padding" src="blue-butterfly.jpg" />

.padding--s

butterfly image using class: padding--s

<img alt="butterfly" class="border padding--s" src="blue-butterfly.jpg" />

.padding--l

butterfly image using class: padding--l

<img alt="butterfly" class="border padding--l" src="blue-butterfly.jpg" />

.padding--xl

butterfly image using class: padding--xl

<img alt="butterfly" class="border padding--xl" src="blue-butterfly.jpg" />

.padding--xxl

butterfly image using class: padding--xxl

<img alt="butterfly" class="border padding--xxl" src="blue-butterfly.jpg" />

.padding--xxxl

butterfly image using class: padding--xxxl

<img alt="butterfly" class="border padding--xxxl" src="blue-butterfly.jpg" />