Break Before

Controlling how page, column, or region breaks should occur before the specified element.

🚧This page is still under construction and some content may not be complete.


break-before:valuebreak-before: value;
break-before:autobreak-before: auto;
break-before:avoidbreak-before: avoid;
break-before:avoid-columnbreak-before: avoid-column;
break-before:avoid-pagebreak-before: avoid-page;
break-before:columnbreak-before: column;
break-before:leftbreak-before: left;
break-before:pagebreak-before: page;
break-before:rectobreak-before: recto;
break-before:revertbreak-before: revert;
break-before:rightbreak-before: right;
break-before:versobreak-before: verso;

Basic usage

Set the break before behavior

Use break-before:value to set how breaks should behave before a generated box.


A content brief is a document that outlines the key details of a piece of content. It should include an overview of the project, a well as any specific instructions or requirements.


There are a wide variety of animals in the world, and each one has its own unique set of characteristics and habits.

<div class="cols:2">
<p>A content brief is a document …</p>
<hr class="break-before:column" />
<p>There are a wide variety of animals in the world …</p>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="break-before:auto:hover break-before:auto@sm break-before:auto@dark break-before:auto@print"></div>
Design Token

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.