Source

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

Property	Default	Description
`--layout-gap`	`1em`	Vertical spacing between elements

Class Utilities

Class	Description
`.--gap-*`	Controls vertical spacing between items using Feo.css design tokens for size

← layout: Flex layout: Grid →