Layout

Break Before

Style syntax for 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 in different states using selectors, media queries, etc.

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

Break Before

Overview [sr-only]

Basic usage

Set the break before behavior

Conditionally apply