Flow

The Flow layout creates consistent vertical spacing between consecutive sibling elements. Originally inspired by the "lobotomized owl" selector, this component uses the * + * pattern to add margin-top to all elements except the first child, ensuring consistent vertical rhythm throughout your content.

Example

<div class="flow --gap-3">
  <h1>First element (no margin)</h1>
  <p>Second element (gets margin-top)</p>
  <p>Third element (gets margin-top)</p>
  <blockquote>Fourth element (gets margin-top)</blockquote>
</div>

Custom Properties

Class Utilities