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>

<!-- Or via attribute (maps to the same CSS variable) -->
<r-column gap="1rem">
  <p>Alpha</p>
  <p>Beta</p>
</r-column>

Attributes​

  • gap — CSS length, optional. Sets vertical spacing between children. Example: gap="12px", gap="1rem".

Notes​

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