Skip to main content

r-column

Vertical stack that places children one after another regardless of width.

Usage​

<!-- Default: no gap -->
<r-column>
  <div>First</div>
  <div style="width: 200px">Second (narrow width, still below)</div>
  <img src="/path/to/image.jpg" alt="Third" />
</r-column>

<!-- Set gap via CSS variable on the element -->
<r-column style="--gap: 12px">
  <p>Item A</p>
  <p>Item B</p>
</r-column>

Notes​

  • Internally uses a flex column with gap. Control spacing via CSS: style="--gap: 8px".
  • Children render in order inside a <slot> and stack vertically even if they specify custom widths.