Layout

Break After

Style syntax for controlling how page, column, or region breaks should occur after an element.

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

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

Basic usage

Set the break after behavior

Use break-after:value to set how breaks should behave after 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-after: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-after:auto:hover break-after:auto@sm break-after:auto@dark break-after:auto@print">…</div>

Break After

Overview [sr-only]

Basic usage

Set the break after behavior

Conditionally apply