Skip to main content
MybringDesign System

Owl spacing

Vertical spacing between child elements

In some cases, where we don’t need flex and gap to put vertical space between elements inside a container, we can use owl selectors. The class is set on the container and will be applied to any child element that has a preceeeding sibling – :nth-child(n+2).

Class Declaration
owlxs margin-top: 0.25rem;
owls margin-top: 0.5rem;
owlm margin-top: 1rem;
owll margin-top: 2rem;
owlxl margin-top: 4rem;
* + *
* + *
* + *
<div class="bg-gray2 pam">
  <div class="owls bg-gray4">
    <div class="bg-white tc pas">* + *</div>
    <div class="bg-white tc pas">* + *</div>
    <div class="bg-white tc pas">* + *</div>
  </div>
</div>