---

Container with a small padding .container--small

---

Container with a large padding .container--large

---

Container with a xlarge padding .container--xlarge

---

Container with a xxlarge padding .container--xxlarge

---

Container with a different x and y padding .container--staggered

---

Container with no padding .container--tight

---

Container with no horizontal padding .container--tight_x

---

Container with no vertical padding .container--tight_y

---

Container with no top padding .container--tight_top

---

Container with no bottom padding .container--tight_bottom

---

Container with border .container--bordered

---

Container with top border .container--bordered_top

---

Container with bottom border .container--bordered_bottom

<div class="container [modifier class]">Container</div>

---

Top and bottom padding .wrapper--padded

---

Small Wrapper .wrapper--small

---

Smaller Wrapper .wrapper--xsmall

---

Smallerer Wrapper .wrapper--xxsmall

<div class="wrapper [modifier class]">Wrapper</div>

---

normal sized gap below .gap

---

small sized gap below .gap_small

---

large sized gap below .gap_large

---

large sized gap below .gap_xlarge

---

normal sized gap below only on mobile .gap--mobile

---

small sized gap below only on mobile .gap_small--mobile

---

large sized gap below only on mobile .gap_large--mobile

---

large sized gap below only on mobile .gap_xlarge--mobile

---

normal sized gap below only on desktop .gap--desktop

---

small sized gap below only on desktop .gap_small--desktop

---

large sized gap below only on desktop .gap_large--desktop

---

large sized gap below only on desktop .gap_xlarge--desktop

<div class="[modifier class]" style="background-color: #000"></div>