Break Before

vel-src: layout.css

Utilities for controlling how a column or page should break before an element.

Class	Properties
vel-break-before-auto	break-before: auto
vel-break-before-avoid	break-before: avoid
vel-break-before-all	break-before: all
vel-break-before-column	break-before: column
vel-break-before-page	break-before: page

Examples

Break before variants

vel-break-before-auto

Normal column/page break behavior

vel-break-before-column

Forces column break before element

vel-break-before-avoid

Avoids break before element

vel-break-before-page

Forces page break before element

example.html

<div class="vel-grid vel-grid-cols-2 vel-gap-4">
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-before-auto</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Normal column/page break behavior</p>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-before-column</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Forces column break before element</p>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-before-avoid</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Avoids break before element</p>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-before-page</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Forces page break before element</p>
  </div>
</div>