Syntax

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.

Class	Declarations
`break-before:value`	`break-before: value;`
`break-before:auto`	`break-before: auto;`
`break-before:avoid`	`break-before: avoid;`
`break-before:avoid-column`	`break-before: avoid-column;`
`break-before:avoid-page`	`break-before: avoid-page;`
`break-before:column`	`break-before: column;`
`break-before:left`	`break-before: left;`
`break-before:page`	`break-before: page;`
`break-before:recto`	`break-before: recto;`
`break-before:revert`	`break-before: revert;`
`break-before:right`	`break-before: right;`
`break-before:verso`	`break-before: verso;`

Basic usage

Set the break before behavior

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

Briefs

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.

Animals

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">
    <h3>Briefs</h3>
    <p>A content brief is a document …</p>
    <hr class="break-before:column" />
    <h3>Animals</h3>
    <p>There are a wide variety of animals in the world …</p>
</div>

Conditionally apply

Apply styles based on different states using selectors and conditional queries.

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

Break Before

Overview

Basic usage

Set the break before behavior

Conditionally apply