page-break-before : Page Break Before Property
The page-break-before property controls whether a page break should occur before an element when generating PDF documents. This property is essential for controlling document pagination, creating chapter breaks, and ensuring specific content starts on a new page. Note that this is a legacy CSS2 property; consider using the newer break-before property for more options.
Usage
selector {
page-break-before: value;
}
The page-break-before property controls pagination by forcing or avoiding page breaks before specific elements in your PDF document.
Supported Values
auto (default)
Automatic page breaking behavior. The browser/PDF generator determines where page breaks occur based on content flow and available space. This is the default value.
always
Forces a page break before the element. The element will always start on a new page, regardless of available space on the current page.
avoid
Attempts to avoid a page break before the element. The PDF generator will try to keep the element on the same page as the preceding content, though this may not always be possible with very large content.
left
Forces one or two page breaks before the element so that the element appears on a left-hand page. Useful for double-sided printing where chapters or sections should start on left pages.
right
Forces one or two page breaks before the element so that the element appears on a right-hand page. Commonly used for double-sided documents where chapters should start on right-hand pages (common in books).
Supported Elements
The page-break-before property can be applied to:
- Block-level elements (
<div>,<section>,<article>) - Headings (
<h1>through<h6>) - Paragraphs (
<p>) - Lists (
<ul>,<ol>) - Tables (
<table>) - Horizontal rules (
<hr>) - Any block container element
Notes
- This is a CSS2 property; the newer
break-beforeproperty provides more options - The
autovalue is the default and allows natural page breaking - Using
alwaysguarantees the element starts on a new page - The
avoidvalue is a suggestion and may be overridden if content is too large - Left and right values are designed for double-sided (duplex) printing
- When using
leftorright, blank pages may be inserted to achieve the desired page position - Page breaks are only applied during PDF generation, not in HTML preview
- Multiple consecutive elements with
page-break-before: alwayswill each start on their own page - Margins and padding may affect the exact positioning after a page break
Data Binding
The page-break-before property supports data binding, allowing you to dynamically control page breaks based on document data, configuration, or content type. This is particularly useful for reports, templates, and documents with variable structure.
Example 1: Conditional page breaks for chapter starts
<style>
.section {
page-break-before: ;
margin-top: ;
}
.section-title {
font-size: ;
font-weight: bold;
}
</style>
<body>
<div class="section">
<h2 class="section-title"></h2>
<p><h1 id="page-break-after--page-break-after-property">page-break-after : Page Break After Property</h1>
<p>The <code class="language-plaintext highlighter-rouge">page-break-after</code> property controls whether a page break should occur after an element when generating PDF documents. This property is useful for ensuring specific content ends before a page break, separating sections, and controlling document flow. Note that this is a legacy CSS2 property; consider using the newer <code class="language-plaintext highlighter-rouge">break-after</code> property for more options.</p>
<h2 id="usage">Usage</h2>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">selector</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="n">value</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>The page-break-after property controls pagination by forcing or avoiding page breaks immediately following specific elements in your PDF document.</p>
<hr />
<h2 id="supported-values">Supported Values</h2>
<h3 id="auto-default">auto (default)</h3>
<p>Automatic page breaking behavior. The browser/PDF generator determines where page breaks occur based on content flow and available space. This is the default value.</p>
<h3 id="always">always</h3>
<p>Forces a page break immediately after the element. Content following the element will always start on a new page.</p>
<h3 id="avoid">avoid</h3>
<p>Attempts to avoid a page break immediately after the element. The PDF generator will try to keep the following content on the same page, though this may not always be possible with large content.</p>
<h3 id="left">left</h3>
<p>Forces one or two page breaks after the element so that the next content appears on a left-hand page. Useful for double-sided printing.</p>
<h3 id="right">right</h3>
<p>Forces one or two page breaks after the element so that the next content appears on a right-hand page. Commonly used for double-sided documents.</p>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">page-break-after</code> property can be applied to:</p>
<ul>
<li>Block-level elements (<code class="language-plaintext highlighter-rouge"><div></code>, <code class="language-plaintext highlighter-rouge"><section></code>, <code class="language-plaintext highlighter-rouge"><article></code>)</li>
<li>Headings (<code class="language-plaintext highlighter-rouge"><h1></code> through <code class="language-plaintext highlighter-rouge"><h6></code>)</li>
<li>Paragraphs (<code class="language-plaintext highlighter-rouge"><p></code>)</li>
<li>Lists (<code class="language-plaintext highlighter-rouge"><ul></code>, <code class="language-plaintext highlighter-rouge"><ol></code>)</li>
<li>Tables (<code class="language-plaintext highlighter-rouge"><table></code>)</li>
<li>Images (<code class="language-plaintext highlighter-rouge"><img></code>)</li>
<li>Any block container element</li>
</ul>
<hr />
<h2 id="notes">Notes</h2>
<ul>
<li>This is a CSS2 property; the newer <code class="language-plaintext highlighter-rouge">break-after</code> property provides more options including column breaks</li>
<li>The <code class="language-plaintext highlighter-rouge">auto</code> value is the default and allows natural page breaking</li>
<li>Using <code class="language-plaintext highlighter-rouge">always</code> guarantees content following the element starts on a new page</li>
<li>The <code class="language-plaintext highlighter-rouge">avoid</code> value is a suggestion and may be overridden if content is too large</li>
<li>Left and right values are designed for double-sided (duplex) printing</li>
<li>When using <code class="language-plaintext highlighter-rouge">left</code> or <code class="language-plaintext highlighter-rouge">right</code>, blank pages may be inserted to achieve the desired page position</li>
<li>Commonly used after title pages, cover pages, and section summaries</li>
<li>Can be combined with <code class="language-plaintext highlighter-rouge">page-break-before</code> for precise control</li>
<li>Page breaks are only applied during PDF generation, not in HTML preview</li>
</ul>
<hr />
<h2 id="data-binding">Data Binding</h2>
<p>The <code class="language-plaintext highlighter-rouge">page-break-after</code> property supports data binding, enabling dynamic control of page breaks following elements based on data, configuration, or document structure. This is ideal for creating flexible templates that adapt to different content types and requirements.</p>
<h3 id="example-1-conditional-page-breaks-after-sections">Example 1: Conditional page breaks after sections</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.content-block</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nc">.block-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content-block"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"block-title"</span><span class="nt">></h2></span>
<span class="nt"><div></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-2-dynamic-summary-pages">Example 2: Dynamic summary pages</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.summary-section</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nc">.summary-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><h1></h1></span>
<span class="nt"><p></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"summary-section"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"summary-title"</span><span class="nt">></span>Summary<span class="nt"></h2></span>
<span class="nt"><p></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-3-variable-document-structure-with-data-driven-breaks">Example 3: Variable document structure with data-driven breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.data-table-container</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nc">.analysis-section</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"data-table-container"</span><span class="nt">></span>
<span class="nt"><h2></h2></span>
<span class="nt"><table></span>
<span class="nt"><tr><th></span>Metric<span class="nt"></th><th></span>Value<span class="nt"></th></tr></span>
<span class="nt"><tr><td></td><td></td></tr></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"analysis-section"</span><span class="nt">></span>
<span class="nt"><h3></span>Analysis<span class="nt"></h3></span>
<span class="nt"><p></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="example-1-cover-page-with-page-break-after">Example 1: Cover page with page break after</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.cover-page</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100vh</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">flex-direction</span><span class="p">:</span> <span class="n">column</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="m">135deg</span><span class="p">,</span> <span class="m">#667eea</span> <span class="m">0%</span><span class="p">,</span> <span class="m">#764ba2</span> <span class="m">100%</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cover-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">48pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cover-subtitle</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cover-page"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"cover-title"</span><span class="nt">></span>Annual Report 2025<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"cover-subtitle"</span><span class="nt">></span>Financial Performance <span class="err">&</span> Strategic Overview<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h2></span>Table of Contents<span class="nt"></h2></span>
<span class="nt"><p></span>Content begins on the next page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-2-table-of-contents-with-page-break-after">Example 2: Table of contents with page break after</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.table-of-contents</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.toc-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">3pt</span> <span class="nb">solid</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.toc-entry</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"table-of-contents"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"toc-title"</span><span class="nt">></span>Table of Contents<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toc-entry"</span><span class="nt">></span>1. Introduction ............... 3<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toc-entry"</span><span class="nt">></span>2. Methodology ............... 7<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toc-entry"</span><span class="nt">></span>3. Results .................. 12<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toc-entry"</span><span class="nt">></span>4. Conclusion ............... 18<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h1></span>1. Introduction<span class="nt"></h1></span>
<span class="nt"><p></span>The main content starts here on a fresh page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-3-executive-summary-followed-by-main-content">Example 3: Executive summary followed by main content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.executive-summary</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#eff6ff</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#2563eb</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.summary-heading</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">22pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e40af</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.summary-highlight</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#dbeafe</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#3b82f6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"executive-summary"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"summary-heading"</span><span class="nt">></span>Executive Summary<span class="nt"></h1></span>
<span class="nt"><p></span>This report presents key findings from our annual performance review...<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"summary-highlight"</span><span class="nt">></span>
<span class="nt"><strong></span>Key Takeaway:<span class="nt"></strong></span> Revenue increased by 23% year-over-year.
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h1></span>Detailed Analysis<span class="nt"></h1></span>
<span class="nt"><p></span>The following sections provide in-depth analysis...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-4-section-summaries-with-page-breaks">Example 4: Section summaries with page breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.section-summary</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fef3c7</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.summary-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#92400e</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.key-points</span> <span class="p">{</span>
<span class="nl">list-style-type</span><span class="p">:</span> <span class="nb">disc</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Section 1: Market Analysis<span class="nt"></h1></span>
<span class="nt"><p></span>Detailed market analysis content...<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"section-summary"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"summary-title"</span><span class="nt">></span>Section 1 Summary<span class="nt"></div></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"key-points"</span><span class="nt">></span>
<span class="nt"><li></span>Market growth rate: 15%<span class="nt"></li></span>
<span class="nt"><li></span>Key competitors identified<span class="nt"></li></span>
<span class="nt"><li></span>Emerging trends analyzed<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"><h1></span>Section 2: Financial Performance<span class="nt"></h1></span>
<span class="nt"><p></span>Next section begins on a new page...<span class="nt"></p></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-5-charts-and-graphs-with-breaks-after">Example 5: Charts and graphs with breaks after</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.chart-container</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chart-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chart-placeholder</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">400pt</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">300pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f3f4f6</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#9ca3af</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chart-caption</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chart-container"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chart-title"</span><span class="nt">></span>Figure 1: Revenue Trends 2020-2025<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chart-placeholder"</span><span class="nt">></span>
[Revenue Chart]
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chart-caption"</span><span class="nt">></span>Data shows consistent growth across all quarters<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h2></span>Analysis of Revenue Trends<span class="nt"></h2></span>
<span class="nt"><p></span>The chart above demonstrates...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-6-question-groups-in-assessment">Example 6: Question groups in assessment</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.question-group</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fafafa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.group-header</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">-25pt</span> <span class="m">-25pt</span> <span class="m">20pt</span> <span class="m">-25pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.question</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding-left</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"question-group"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"group-header"</span><span class="nt">></span>Questions 1-5: Multiple Choice<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"question"</span><span class="nt">></span>
<span class="nt"><strong></span>1.<span class="nt"></strong></span> What is the capital of France?<span class="nt"><br/></span>
A) London <span class="ni">&nbsp;</span> B) Paris <span class="ni">&nbsp;</span> C) Berlin <span class="ni">&nbsp;</span> D) Madrid
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"question"</span><span class="nt">></span>
<span class="nt"><strong></span>2.<span class="nt"></strong></span> Which planet is closest to the Sun?<span class="nt"><br/></span>
A) Venus <span class="ni">&nbsp;</span> B) Earth <span class="ni">&nbsp;</span> C) Mercury <span class="ni">&nbsp;</span> D) Mars
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"question-group"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"group-header"</span><span class="nt">></span>Questions 6-10: True or False<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"question"</span><span class="nt">></span>
<span class="nt"><strong></span>6.<span class="nt"></strong></span> The Earth is flat. (True/False)
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-7-title-page-for-book-chapters">Example 7: Title page for book chapters</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.chapter-title-page</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100vh</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">flex-direction</span><span class="p">:</span> <span class="n">column</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f9fafb</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chapter-ornament</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">72pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chapter-label</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">text-transform</span><span class="p">:</span> <span class="nb">uppercase</span><span class="p">;</span>
<span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">3pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chapter-name</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">36pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chapter-title-page"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chapter-ornament"</span><span class="nt">></span>✦<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chapter-label"</span><span class="nt">></span>Chapter One<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chapter-name"</span><span class="nt">></span>The Beginning<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><p></span>The chapter content begins on the right-hand page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-8-full-page-images-with-breaks">Example 8: Full-page images with breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.full-page-image</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.image-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.image-placeholder</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">90%</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">500pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#e5e7eb</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#9ca3af</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.image-description</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#4b5563</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">justify</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"full-page-image"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"image-title"</span><span class="nt">></span>Architectural Rendering<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"image-placeholder"</span><span class="nt">></span>[Building Image]<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"image-description"</span><span class="nt">></span>
The proposed building features modern design elements...
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h2></span>Design Specifications<span class="nt"></h2></span>
<span class="nt"><p></span>Details follow on the next page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-9-certificate-with-blank-back-page">Example 9: Certificate with blank back page</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.certificate</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100vh</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">10pt</span> <span class="nb">double</span> <span class="m">#d4af37</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">50pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fffef8</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cert-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">42pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">50pt</span> <span class="m">0</span> <span class="m">30pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="nb">serif</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cert-recipient</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">30pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cert-description</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"certificate"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cert-title"</span><span class="nt">></span>Certificate of Achievement<span class="nt"></div></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"cert-description"</span><span class="nt">></span>This is to certify that<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"cert-recipient"</span><span class="nt">></span>John Smith<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"cert-description"</span><span class="nt">></span>has successfully completed the Professional Development Course<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h1></span>Continuing Education Credits<span class="nt"></h1></span>
<span class="nt"><p></span>Additional information follows...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-10-glossary-entries-with-page-breaks">Example 10: Glossary entries with page breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.glossary-section</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.glossary-letter</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">48pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#2563eb</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">3pt</span> <span class="nb">solid</span> <span class="m">#2563eb</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.glossary-term</span> <span class="p">{</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e40af</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.glossary-definition</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">5pt</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-section"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-letter"</span><span class="nt">></span>A<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-term"</span><span class="nt">></span>Algorithm<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-definition"</span><span class="nt">></span>A step-by-step procedure for solving a problem...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-term"</span><span class="nt">></span>API<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-definition"</span><span class="nt">></span>Application Programming Interface...<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-section"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-letter"</span><span class="nt">></span>B<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-term"</span><span class="nt">></span>Backend<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-definition"</span><span class="nt">></span>The server-side portion of an application...<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-11-data-tables-with-analysis-after-each">Example 11: Data tables with analysis after each</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.data-section</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.section-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.data-table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.data-table</span> <span class="nt">th</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#1e40af</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.data-table</span> <span class="nt">td</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.analysis-box</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f0f9ff</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#3b82f6</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"data-section"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"section-title"</span><span class="nt">></span>Q1 2025 Sales Data<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">class=</span><span class="s">"data-table"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Region<span class="nt"></th></span>
<span class="nt"><th></span>Sales<span class="nt"></th></span>
<span class="nt"><th></span>Growth<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>North<span class="nt"></td></span>
<span class="nt"><td></span>$125,000<span class="nt"></td></span>
<span class="nt"><td></span>+15%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>South<span class="nt"></td></span>
<span class="nt"><td></span>$98,000<span class="nt"></td></span>
<span class="nt"><td></span>+8%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"analysis-box"</span><span class="nt">></span>
<span class="nt"><strong></span>Analysis:<span class="nt"></strong></span> Northern region shows strongest growth...
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"data-section"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"section-title"</span><span class="nt">></span>Q2 2025 Sales Data<span class="nt"></h2></span>
<span class="nt"><p></span>Next quarter data on a fresh page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-12-newsletter-articles-separated-by-page-breaks">Example 12: Newsletter articles separated by page breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.newsletter-article</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.article-header</span> <span class="p">{</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">3pt</span> <span class="nb">solid</span> <span class="m">#dc2626</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.article-category</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#dc2626</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">text-transform</span><span class="p">:</span> <span class="nb">uppercase</span><span class="p">;</span>
<span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">1pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.article-headline</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.article-byline</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"newsletter-article"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-category"</span><span class="nt">></span>Technology<span class="nt"></div></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"article-headline"</span><span class="nt">></span>Artificial Intelligence Trends in 2025<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-byline"</span><span class="nt">></span>By Sarah Johnson | March 15, 2025<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><p></span>The landscape of artificial intelligence continues to evolve...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"newsletter-article"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-category"</span><span class="nt">></span>Business<span class="nt"></div></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"article-headline"</span><span class="nt">></span>Market Outlook for Q2<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-byline"</span><span class="nt">></span>By Michael Chen | March 15, 2025<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><p></span>Economic indicators suggest strong performance...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-13-recipe-cards-with-page-breaks">Example 13: Recipe cards with page breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.recipe-card</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#16a34a</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f9fafb</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.recipe-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">26pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#15803d</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.recipe-meta</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="py">gap</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.ingredients-section</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f0fdf4</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.section-heading</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#15803d</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"recipe-card"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"recipe-title"</span><span class="nt">></span>Chocolate Chip Cookies<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"recipe-meta"</span><span class="nt">></span>
<span class="nt"><span></span>Prep: 15 min<span class="nt"></span></span>
<span class="nt"><span></span>Cook: 12 min<span class="nt"></span></span>
<span class="nt"><span></span>Servings: 24<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ingredients-section"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"section-heading"</span><span class="nt">></span>Ingredients<span class="nt"></div></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>2 cups all-purpose flour<span class="nt"></li></span>
<span class="nt"><li></span>1 cup butter<span class="nt"></li></span>
<span class="nt"><li></span>1 cup chocolate chips<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"section-heading"</span><span class="nt">></span>Instructions<span class="nt"></div></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Preheat oven to 350°F...<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"recipe-card"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"recipe-title"</span><span class="nt">></span>Vegetable Soup<span class="nt"></h1></span>
<span class="nt"><p></span>Next recipe on a fresh page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-14-team-member-profiles">Example 14: Team member profiles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.team-profile</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="py">gap</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.profile-photo</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
<span class="nl">flex-shrink</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.profile-info</span> <span class="p">{</span>
<span class="nl">flex</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.profile-name</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.profile-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.profile-bio</span> <span class="p">{</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">justify</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"team-profile"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-photo"</span><span class="nt">></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-info"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"profile-name"</span><span class="nt">></span>Jane Doe<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-title"</span><span class="nt">></span>Chief Executive Officer<span class="nt"></div></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"profile-bio"</span><span class="nt">></span>
Jane brings 20 years of experience in technology leadership...
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"team-profile"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-photo"</span><span class="nt">></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-info"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"profile-name"</span><span class="nt">></span>John Smith<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-title"</span><span class="nt">></span>Chief Technology Officer<span class="nt"></div></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"profile-bio"</span><span class="nt">></span>
John is a seasoned technologist with expertise in cloud architecture...
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-15-product-specification-sheets">Example 15: Product specification sheets</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.product-spec</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.spec-header</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="m">90deg</span><span class="p">,</span> <span class="m">#1e3a8a</span> <span class="m">0%</span><span class="p">,</span> <span class="m">#3b82f6</span> <span class="m">100%</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.product-name</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.product-code</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0.9</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.spec-grid</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">grid</span><span class="p">;</span>
<span class="py">grid-template-columns</span><span class="p">:</span> <span class="m">150pt</span> <span class="m">1</span><span class="n">fr</span><span class="p">;</span>
<span class="py">gap</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.spec-label</span> <span class="p">{</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#374151</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.spec-value</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-spec"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-name"</span><span class="nt">></span>Professional Laptop Pro<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-code"</span><span class="nt">></span>SKU: LAP-PRO-2025-001<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-grid"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-label"</span><span class="nt">></span>Processor:<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-value"</span><span class="nt">></span>Intel Core i7-12700H<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-label"</span><span class="nt">></span>RAM:<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-value"</span><span class="nt">></span>32GB DDR5<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-label"</span><span class="nt">></span>Storage:<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-value"</span><span class="nt">></span>1TB NVMe SSD<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-spec"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-name"</span><span class="nt">></span>Business Desktop Elite<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-code"</span><span class="nt">></span>SKU: DSK-ELT-2025-002<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><p></span>Specifications for the next product...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/cssproperties/css_prop_page-break-before">page-break-before</a> - Control page breaks before elements</li>
<li><a href="/reference/cssproperties/css_prop_page-break-inside">page-break-inside</a> - Control page breaks within elements</li>
<li><a href="/reference/cssproperties/css_prop_break-after">break-after</a> - Modern alternative with more options</li>
<li><a href="/reference/cssproperties/css_prop_break-before">break-before</a> - Modern page and column break control</li>
<li><a href="/reference/cssproperties/css_prop_page">page</a> - Specify named page for element</li>
<li><a href="/reference/css_atrules/css_atrule_page">@page rule</a> - Define page properties and margins</li>
</ul>
<hr />
</p>
</div>
</body>
Example 2: Data-driven report sections
<style>
.report-section {
page-break-before: ;
}
.section-header {
background-color: ;
color: white;
padding: 15pt;
font-size: 20pt;
font-weight: bold;
}
</style>
<body>
<div class="report-section">
<div class="section-header"></div>
<div class="section-content"><h1 id="page-break-after--page-break-after-property">page-break-after : Page Break After Property</h1>
<p>The <code class="language-plaintext highlighter-rouge">page-break-after</code> property controls whether a page break should occur after an element when generating PDF documents. This property is useful for ensuring specific content ends before a page break, separating sections, and controlling document flow. Note that this is a legacy CSS2 property; consider using the newer <code class="language-plaintext highlighter-rouge">break-after</code> property for more options.</p>
<h2 id="usage">Usage</h2>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">selector</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="n">value</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>The page-break-after property controls pagination by forcing or avoiding page breaks immediately following specific elements in your PDF document.</p>
<hr />
<h2 id="supported-values">Supported Values</h2>
<h3 id="auto-default">auto (default)</h3>
<p>Automatic page breaking behavior. The browser/PDF generator determines where page breaks occur based on content flow and available space. This is the default value.</p>
<h3 id="always">always</h3>
<p>Forces a page break immediately after the element. Content following the element will always start on a new page.</p>
<h3 id="avoid">avoid</h3>
<p>Attempts to avoid a page break immediately after the element. The PDF generator will try to keep the following content on the same page, though this may not always be possible with large content.</p>
<h3 id="left">left</h3>
<p>Forces one or two page breaks after the element so that the next content appears on a left-hand page. Useful for double-sided printing.</p>
<h3 id="right">right</h3>
<p>Forces one or two page breaks after the element so that the next content appears on a right-hand page. Commonly used for double-sided documents.</p>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">page-break-after</code> property can be applied to:</p>
<ul>
<li>Block-level elements (<code class="language-plaintext highlighter-rouge"><div></code>, <code class="language-plaintext highlighter-rouge"><section></code>, <code class="language-plaintext highlighter-rouge"><article></code>)</li>
<li>Headings (<code class="language-plaintext highlighter-rouge"><h1></code> through <code class="language-plaintext highlighter-rouge"><h6></code>)</li>
<li>Paragraphs (<code class="language-plaintext highlighter-rouge"><p></code>)</li>
<li>Lists (<code class="language-plaintext highlighter-rouge"><ul></code>, <code class="language-plaintext highlighter-rouge"><ol></code>)</li>
<li>Tables (<code class="language-plaintext highlighter-rouge"><table></code>)</li>
<li>Images (<code class="language-plaintext highlighter-rouge"><img></code>)</li>
<li>Any block container element</li>
</ul>
<hr />
<h2 id="notes">Notes</h2>
<ul>
<li>This is a CSS2 property; the newer <code class="language-plaintext highlighter-rouge">break-after</code> property provides more options including column breaks</li>
<li>The <code class="language-plaintext highlighter-rouge">auto</code> value is the default and allows natural page breaking</li>
<li>Using <code class="language-plaintext highlighter-rouge">always</code> guarantees content following the element starts on a new page</li>
<li>The <code class="language-plaintext highlighter-rouge">avoid</code> value is a suggestion and may be overridden if content is too large</li>
<li>Left and right values are designed for double-sided (duplex) printing</li>
<li>When using <code class="language-plaintext highlighter-rouge">left</code> or <code class="language-plaintext highlighter-rouge">right</code>, blank pages may be inserted to achieve the desired page position</li>
<li>Commonly used after title pages, cover pages, and section summaries</li>
<li>Can be combined with <code class="language-plaintext highlighter-rouge">page-break-before</code> for precise control</li>
<li>Page breaks are only applied during PDF generation, not in HTML preview</li>
</ul>
<hr />
<h2 id="data-binding">Data Binding</h2>
<p>The <code class="language-plaintext highlighter-rouge">page-break-after</code> property supports data binding, enabling dynamic control of page breaks following elements based on data, configuration, or document structure. This is ideal for creating flexible templates that adapt to different content types and requirements.</p>
<h3 id="example-1-conditional-page-breaks-after-sections">Example 1: Conditional page breaks after sections</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.content-block</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nc">.block-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content-block"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"block-title"</span><span class="nt">></h2></span>
<span class="nt"><div></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-2-dynamic-summary-pages">Example 2: Dynamic summary pages</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.summary-section</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nc">.summary-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><h1></h1></span>
<span class="nt"><p></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"summary-section"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"summary-title"</span><span class="nt">></span>Summary<span class="nt"></h2></span>
<span class="nt"><p></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-3-variable-document-structure-with-data-driven-breaks">Example 3: Variable document structure with data-driven breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.data-table-container</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nc">.analysis-section</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"data-table-container"</span><span class="nt">></span>
<span class="nt"><h2></h2></span>
<span class="nt"><table></span>
<span class="nt"><tr><th></span>Metric<span class="nt"></th><th></span>Value<span class="nt"></th></tr></span>
<span class="nt"><tr><td></td><td></td></tr></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"analysis-section"</span><span class="nt">></span>
<span class="nt"><h3></span>Analysis<span class="nt"></h3></span>
<span class="nt"><p></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="example-1-cover-page-with-page-break-after">Example 1: Cover page with page break after</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.cover-page</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100vh</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">flex-direction</span><span class="p">:</span> <span class="n">column</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="m">135deg</span><span class="p">,</span> <span class="m">#667eea</span> <span class="m">0%</span><span class="p">,</span> <span class="m">#764ba2</span> <span class="m">100%</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cover-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">48pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cover-subtitle</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cover-page"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"cover-title"</span><span class="nt">></span>Annual Report 2025<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"cover-subtitle"</span><span class="nt">></span>Financial Performance <span class="err">&</span> Strategic Overview<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h2></span>Table of Contents<span class="nt"></h2></span>
<span class="nt"><p></span>Content begins on the next page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-2-table-of-contents-with-page-break-after">Example 2: Table of contents with page break after</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.table-of-contents</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.toc-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">3pt</span> <span class="nb">solid</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.toc-entry</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"table-of-contents"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"toc-title"</span><span class="nt">></span>Table of Contents<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toc-entry"</span><span class="nt">></span>1. Introduction ............... 3<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toc-entry"</span><span class="nt">></span>2. Methodology ............... 7<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toc-entry"</span><span class="nt">></span>3. Results .................. 12<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toc-entry"</span><span class="nt">></span>4. Conclusion ............... 18<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h1></span>1. Introduction<span class="nt"></h1></span>
<span class="nt"><p></span>The main content starts here on a fresh page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-3-executive-summary-followed-by-main-content">Example 3: Executive summary followed by main content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.executive-summary</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#eff6ff</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#2563eb</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.summary-heading</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">22pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e40af</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.summary-highlight</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#dbeafe</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#3b82f6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"executive-summary"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"summary-heading"</span><span class="nt">></span>Executive Summary<span class="nt"></h1></span>
<span class="nt"><p></span>This report presents key findings from our annual performance review...<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"summary-highlight"</span><span class="nt">></span>
<span class="nt"><strong></span>Key Takeaway:<span class="nt"></strong></span> Revenue increased by 23% year-over-year.
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h1></span>Detailed Analysis<span class="nt"></h1></span>
<span class="nt"><p></span>The following sections provide in-depth analysis...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-4-section-summaries-with-page-breaks">Example 4: Section summaries with page breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.section-summary</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fef3c7</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.summary-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#92400e</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.key-points</span> <span class="p">{</span>
<span class="nl">list-style-type</span><span class="p">:</span> <span class="nb">disc</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Section 1: Market Analysis<span class="nt"></h1></span>
<span class="nt"><p></span>Detailed market analysis content...<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"section-summary"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"summary-title"</span><span class="nt">></span>Section 1 Summary<span class="nt"></div></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"key-points"</span><span class="nt">></span>
<span class="nt"><li></span>Market growth rate: 15%<span class="nt"></li></span>
<span class="nt"><li></span>Key competitors identified<span class="nt"></li></span>
<span class="nt"><li></span>Emerging trends analyzed<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"><h1></span>Section 2: Financial Performance<span class="nt"></h1></span>
<span class="nt"><p></span>Next section begins on a new page...<span class="nt"></p></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-5-charts-and-graphs-with-breaks-after">Example 5: Charts and graphs with breaks after</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.chart-container</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chart-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chart-placeholder</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">400pt</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">300pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f3f4f6</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#9ca3af</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chart-caption</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chart-container"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chart-title"</span><span class="nt">></span>Figure 1: Revenue Trends 2020-2025<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chart-placeholder"</span><span class="nt">></span>
[Revenue Chart]
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chart-caption"</span><span class="nt">></span>Data shows consistent growth across all quarters<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h2></span>Analysis of Revenue Trends<span class="nt"></h2></span>
<span class="nt"><p></span>The chart above demonstrates...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-6-question-groups-in-assessment">Example 6: Question groups in assessment</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.question-group</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fafafa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.group-header</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">-25pt</span> <span class="m">-25pt</span> <span class="m">20pt</span> <span class="m">-25pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.question</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding-left</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"question-group"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"group-header"</span><span class="nt">></span>Questions 1-5: Multiple Choice<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"question"</span><span class="nt">></span>
<span class="nt"><strong></span>1.<span class="nt"></strong></span> What is the capital of France?<span class="nt"><br/></span>
A) London <span class="ni">&nbsp;</span> B) Paris <span class="ni">&nbsp;</span> C) Berlin <span class="ni">&nbsp;</span> D) Madrid
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"question"</span><span class="nt">></span>
<span class="nt"><strong></span>2.<span class="nt"></strong></span> Which planet is closest to the Sun?<span class="nt"><br/></span>
A) Venus <span class="ni">&nbsp;</span> B) Earth <span class="ni">&nbsp;</span> C) Mercury <span class="ni">&nbsp;</span> D) Mars
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"question-group"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"group-header"</span><span class="nt">></span>Questions 6-10: True or False<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"question"</span><span class="nt">></span>
<span class="nt"><strong></span>6.<span class="nt"></strong></span> The Earth is flat. (True/False)
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-7-title-page-for-book-chapters">Example 7: Title page for book chapters</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.chapter-title-page</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100vh</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">flex-direction</span><span class="p">:</span> <span class="n">column</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f9fafb</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chapter-ornament</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">72pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chapter-label</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">text-transform</span><span class="p">:</span> <span class="nb">uppercase</span><span class="p">;</span>
<span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">3pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.chapter-name</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">36pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chapter-title-page"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chapter-ornament"</span><span class="nt">></span>✦<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chapter-label"</span><span class="nt">></span>Chapter One<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"chapter-name"</span><span class="nt">></span>The Beginning<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><p></span>The chapter content begins on the right-hand page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-8-full-page-images-with-breaks">Example 8: Full-page images with breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.full-page-image</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.image-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.image-placeholder</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">90%</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">500pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#e5e7eb</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#9ca3af</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.image-description</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#4b5563</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">justify</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"full-page-image"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"image-title"</span><span class="nt">></span>Architectural Rendering<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"image-placeholder"</span><span class="nt">></span>[Building Image]<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"image-description"</span><span class="nt">></span>
The proposed building features modern design elements...
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h2></span>Design Specifications<span class="nt"></h2></span>
<span class="nt"><p></span>Details follow on the next page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-9-certificate-with-blank-back-page">Example 9: Certificate with blank back page</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.certificate</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100vh</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">10pt</span> <span class="nb">double</span> <span class="m">#d4af37</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">50pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fffef8</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cert-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">42pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">50pt</span> <span class="m">0</span> <span class="m">30pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="nb">serif</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cert-recipient</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">30pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cert-description</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"certificate"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cert-title"</span><span class="nt">></span>Certificate of Achievement<span class="nt"></div></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"cert-description"</span><span class="nt">></span>This is to certify that<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"cert-recipient"</span><span class="nt">></span>John Smith<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"cert-description"</span><span class="nt">></span>has successfully completed the Professional Development Course<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><h1></span>Continuing Education Credits<span class="nt"></h1></span>
<span class="nt"><p></span>Additional information follows...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-10-glossary-entries-with-page-breaks">Example 10: Glossary entries with page breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.glossary-section</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.glossary-letter</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">48pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#2563eb</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">3pt</span> <span class="nb">solid</span> <span class="m">#2563eb</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.glossary-term</span> <span class="p">{</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e40af</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.glossary-definition</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">5pt</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-section"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-letter"</span><span class="nt">></span>A<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-term"</span><span class="nt">></span>Algorithm<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-definition"</span><span class="nt">></span>A step-by-step procedure for solving a problem...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-term"</span><span class="nt">></span>API<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-definition"</span><span class="nt">></span>Application Programming Interface...<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-section"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-letter"</span><span class="nt">></span>B<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-term"</span><span class="nt">></span>Backend<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"glossary-definition"</span><span class="nt">></span>The server-side portion of an application...<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-11-data-tables-with-analysis-after-each">Example 11: Data tables with analysis after each</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.data-section</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.section-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.data-table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.data-table</span> <span class="nt">th</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#1e40af</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.data-table</span> <span class="nt">td</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.analysis-box</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f0f9ff</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#3b82f6</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"data-section"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"section-title"</span><span class="nt">></span>Q1 2025 Sales Data<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">class=</span><span class="s">"data-table"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Region<span class="nt"></th></span>
<span class="nt"><th></span>Sales<span class="nt"></th></span>
<span class="nt"><th></span>Growth<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>North<span class="nt"></td></span>
<span class="nt"><td></span>$125,000<span class="nt"></td></span>
<span class="nt"><td></span>+15%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td></span>South<span class="nt"></td></span>
<span class="nt"><td></span>$98,000<span class="nt"></td></span>
<span class="nt"><td></span>+8%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"analysis-box"</span><span class="nt">></span>
<span class="nt"><strong></span>Analysis:<span class="nt"></strong></span> Northern region shows strongest growth...
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"data-section"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"section-title"</span><span class="nt">></span>Q2 2025 Sales Data<span class="nt"></h2></span>
<span class="nt"><p></span>Next quarter data on a fresh page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-12-newsletter-articles-separated-by-page-breaks">Example 12: Newsletter articles separated by page breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.newsletter-article</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.article-header</span> <span class="p">{</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">3pt</span> <span class="nb">solid</span> <span class="m">#dc2626</span><span class="p">;</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.article-category</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#dc2626</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">text-transform</span><span class="p">:</span> <span class="nb">uppercase</span><span class="p">;</span>
<span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">1pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.article-headline</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.article-byline</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"newsletter-article"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-category"</span><span class="nt">></span>Technology<span class="nt"></div></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"article-headline"</span><span class="nt">></span>Artificial Intelligence Trends in 2025<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-byline"</span><span class="nt">></span>By Sarah Johnson | March 15, 2025<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><p></span>The landscape of artificial intelligence continues to evolve...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"newsletter-article"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-category"</span><span class="nt">></span>Business<span class="nt"></div></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"article-headline"</span><span class="nt">></span>Market Outlook for Q2<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"article-byline"</span><span class="nt">></span>By Michael Chen | March 15, 2025<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><p></span>Economic indicators suggest strong performance...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-13-recipe-cards-with-page-breaks">Example 13: Recipe cards with page breaks</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.recipe-card</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#16a34a</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f9fafb</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.recipe-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">26pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#15803d</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.recipe-meta</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="py">gap</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.ingredients-section</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#f0fdf4</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.section-heading</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#15803d</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"recipe-card"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"recipe-title"</span><span class="nt">></span>Chocolate Chip Cookies<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"recipe-meta"</span><span class="nt">></span>
<span class="nt"><span></span>Prep: 15 min<span class="nt"></span></span>
<span class="nt"><span></span>Cook: 12 min<span class="nt"></span></span>
<span class="nt"><span></span>Servings: 24<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ingredients-section"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"section-heading"</span><span class="nt">></span>Ingredients<span class="nt"></div></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>2 cups all-purpose flour<span class="nt"></li></span>
<span class="nt"><li></span>1 cup butter<span class="nt"></li></span>
<span class="nt"><li></span>1 cup chocolate chips<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"section-heading"</span><span class="nt">></span>Instructions<span class="nt"></div></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Preheat oven to 350°F...<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"recipe-card"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"recipe-title"</span><span class="nt">></span>Vegetable Soup<span class="nt"></h1></span>
<span class="nt"><p></span>Next recipe on a fresh page...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-14-team-member-profiles">Example 14: Team member profiles</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.team-profile</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="py">gap</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.profile-photo</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#d1d5db</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
<span class="nl">flex-shrink</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.profile-info</span> <span class="p">{</span>
<span class="nl">flex</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.profile-name</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.profile-title</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.profile-bio</span> <span class="p">{</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">justify</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"team-profile"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-photo"</span><span class="nt">></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-info"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"profile-name"</span><span class="nt">></span>Jane Doe<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-title"</span><span class="nt">></span>Chief Executive Officer<span class="nt"></div></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"profile-bio"</span><span class="nt">></span>
Jane brings 20 years of experience in technology leadership...
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"team-profile"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-photo"</span><span class="nt">></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-info"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"profile-name"</span><span class="nt">></span>John Smith<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"profile-title"</span><span class="nt">></span>Chief Technology Officer<span class="nt"></div></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"profile-bio"</span><span class="nt">></span>
John is a seasoned technologist with expertise in cloud architecture...
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<h3 id="example-15-product-specification-sheets">Example 15: Product specification sheets</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.product-spec</span> <span class="p">{</span>
<span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">always</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.spec-header</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="m">90deg</span><span class="p">,</span> <span class="m">#1e3a8a</span> <span class="m">0%</span><span class="p">,</span> <span class="m">#3b82f6</span> <span class="m">100%</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.product-name</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.product-code</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0.9</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.spec-grid</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">grid</span><span class="p">;</span>
<span class="py">grid-template-columns</span><span class="p">:</span> <span class="m">150pt</span> <span class="m">1</span><span class="n">fr</span><span class="p">;</span>
<span class="py">gap</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.spec-label</span> <span class="p">{</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#374151</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.spec-value</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-spec"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-name"</span><span class="nt">></span>Professional Laptop Pro<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-code"</span><span class="nt">></span>SKU: LAP-PRO-2025-001<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-grid"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-label"</span><span class="nt">></span>Processor:<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-value"</span><span class="nt">></span>Intel Core i7-12700H<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-label"</span><span class="nt">></span>RAM:<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-value"</span><span class="nt">></span>32GB DDR5<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-label"</span><span class="nt">></span>Storage:<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-value"</span><span class="nt">></span>1TB NVMe SSD<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-spec"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spec-header"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-name"</span><span class="nt">></span>Business Desktop Elite<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"product-code"</span><span class="nt">></span>SKU: DSK-ELT-2025-002<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><p></span>Specifications for the next product...<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/cssproperties/css_prop_page-break-before">page-break-before</a> - Control page breaks before elements</li>
<li><a href="/reference/cssproperties/css_prop_page-break-inside">page-break-inside</a> - Control page breaks within elements</li>
<li><a href="/reference/cssproperties/css_prop_break-after">break-after</a> - Modern alternative with more options</li>
<li><a href="/reference/cssproperties/css_prop_break-before">break-before</a> - Modern page and column break control</li>
<li><a href="/reference/cssproperties/css_prop_page">page</a> - Specify named page for element</li>
<li><a href="/reference/css_atrules/css_atrule_page">@page rule</a> - Define page properties and margins</li>
</ul>
<hr />
</div>
</div>
</body>
Example 3: Multi-format document with conditional pagination
<style>
.document-part {
page-break-before: ;
}
.part-header {
font-size: ;
page-break-after: ;
}
</style>
<body>
<div class="document-part">
<h1 class="part-header"></h1>
<p></p>
</div>
</body>
Examples
Example 1: Chapter breaks in a book
<style>
.chapter {
page-break-before: always;
font-size: 24pt;
font-weight: bold;
margin-top: 0;
}
</style>
<body>
<h1 class="chapter">Chapter 1: Introduction</h1>
<p>Content of chapter 1...</p>
<h1 class="chapter">Chapter 2: Getting Started</h1>
<p>Content of chapter 2...</p>
<h1 class="chapter">Chapter 3: Advanced Topics</h1>
<p>Content of chapter 3...</p>
</body>
Example 2: Section separator with automatic page breaks
<style>
.section {
margin: 20pt 0;
}
.section-title {
font-size: 18pt;
font-weight: bold;
color: #1e3a8a;
}
</style>
<body>
<div class="section">
<h2 class="section-title">Introduction</h2>
<p>This section flows naturally with automatic page breaking...</p>
</div>
<div class="section">
<h2 class="section-title">Methodology</h2>
<p>Content continues on the same page if space permits...</p>
</div>
</body>
Example 3: Major sections on new pages
<style>
.major-section {
page-break-before: always;
}
.section-header {
background-color: #1e3a8a;
color: white;
padding: 15pt;
font-size: 20pt;
font-weight: bold;
}
</style>
<body>
<div class="major-section">
<div class="section-header">Executive Summary</div>
<p>Summary content starts on a fresh page...</p>
</div>
<div class="major-section">
<div class="section-header">Financial Analysis</div>
<p>Financial data starts on its own page...</p>
</div>
<div class="major-section">
<div class="section-header">Recommendations</div>
<p>Recommendations section on a new page...</p>
</div>
</body>
Example 4: Avoiding page breaks before important headings
<style>
.important-heading {
page-break-before: avoid;
page-break-after: avoid;
font-size: 16pt;
font-weight: bold;
color: #dc2626;
margin: 15pt 0 10pt 0;
}
</style>
<body>
<p>Previous paragraph content that flows naturally...</p>
<h3 class="important-heading">Critical Information</h3>
<p>This heading tries to stay with the preceding content to avoid orphaning.</p>
</body>
Example 5: Right-hand page starts for book chapters
<style>
.book-chapter {
page-break-before: right;
padding-top: 50pt;
}
.chapter-number {
font-size: 36pt;
color: #6b7280;
font-weight: 300;
}
.chapter-title {
font-size: 28pt;
font-weight: bold;
margin-top: 10pt;
}
</style>
<body>
<div class="book-chapter">
<div class="chapter-number">Chapter 1</div>
<h1 class="chapter-title">The Beginning</h1>
<p>Chapter content starts on right-hand page...</p>
</div>
<div class="book-chapter">
<div class="chapter-number">Chapter 2</div>
<h1 class="chapter-title">The Journey</h1>
<p>Each chapter begins on a right-hand page...</p>
</div>
</body>
Example 6: Left-hand page starts for appendices
<style>
.appendix {
page-break-before: left;
}
.appendix-header {
font-size: 24pt;
font-weight: bold;
border-bottom: 2pt solid #1e3a8a;
padding-bottom: 10pt;
margin-bottom: 20pt;
}
</style>
<body>
<div class="appendix">
<h1 class="appendix-header">Appendix A: Technical Specifications</h1>
<p>Technical details on left-hand page...</p>
</div>
<div class="appendix">
<h1 class="appendix-header">Appendix B: References</h1>
<p>References list on left-hand page...</p>
</div>
</body>
Example 7: Invoice sections on separate pages
<style>
.invoice-summary {
page-break-before: always;
padding: 20pt;
border: 2pt solid #1e3a8a;
}
.invoice-details {
page-break-before: always;
}
.section-title {
font-size: 18pt;
font-weight: bold;
margin-bottom: 15pt;
}
</style>
<body>
<div class="invoice-summary">
<h2 class="section-title">Invoice Summary</h2>
<p>Total Amount Due: $5,432.10</p>
</div>
<div class="invoice-details">
<h2 class="section-title">Detailed Line Items</h2>
<table>
<tr><td>Item 1</td><td>$100.00</td></tr>
<tr><td>Item 2</td><td>$250.00</td></tr>
</table>
</div>
</body>
Example 8: Report with executive summary on first page
<style>
.executive-summary {
background-color: #f0f9ff;
padding: 30pt;
border-left: 5pt solid #2563eb;
}
.main-report {
page-break-before: always;
}
.summary-title {
font-size: 22pt;
font-weight: bold;
color: #1e3a8a;
margin-bottom: 15pt;
}
</style>
<body>
<div class="executive-summary">
<h1 class="summary-title">Executive Summary</h1>
<p>Key findings and recommendations...</p>
</div>
<div class="main-report">
<h1>Detailed Analysis</h1>
<p>Full report content begins on a new page...</p>
</div>
</body>
Example 9: Questionnaire sections
<style>
.question-section {
page-break-before: always;
padding: 20pt;
}
.section-number {
display: inline-block;
width: 40pt;
height: 40pt;
background-color: #2563eb;
color: white;
text-align: center;
line-height: 40pt;
border-radius: 50%;
font-size: 18pt;
font-weight: bold;
}
.section-instructions {
margin: 15pt 0;
font-style: italic;
color: #6b7280;
}
</style>
<body>
<div class="question-section">
<span class="section-number">1</span>
<h2>Personal Information</h2>
<p class="section-instructions">Please complete all fields in this section.</p>
</div>
<div class="question-section">
<span class="section-number">2</span>
<h2>Professional Background</h2>
<p class="section-instructions">Provide details about your work experience.</p>
</div>
</body>
Example 10: Terms and conditions with each section on new page
<style>
.terms-section {
page-break-before: always;
}
.terms-heading {
font-size: 16pt;
font-weight: bold;
border-bottom: 2pt solid #374151;
padding-bottom: 8pt;
margin-bottom: 15pt;
}
.terms-content {
text-align: justify;
line-height: 1.6;
}
</style>
<body>
<div class="terms-section">
<h2 class="terms-heading">1. Definitions</h2>
<div class="terms-content">
<p>In these terms and conditions...</p>
</div>
</div>
<div class="terms-section">
<h2 class="terms-heading">2. Scope of Services</h2>
<div class="terms-content">
<p>The services provided under this agreement...</p>
</div>
</div>
</body>
Example 11: Multi-part form with page breaks
<style>
.form-part {
page-break-before: always;
border: 1pt solid #d1d5db;
padding: 25pt;
background-color: #f9fafb;
}
.part-header {
background-color: #1e3a8a;
color: white;
padding: 12pt;
margin: -25pt -25pt 20pt -25pt;
font-size: 18pt;
font-weight: bold;
}
</style>
<body>
<div class="form-part">
<div class="part-header">Part A: Applicant Information</div>
<p>Name: _______________________</p>
<p>Address: _____________________</p>
</div>
<div class="form-part">
<div class="part-header">Part B: Employment History</div>
<p>Current Employer: ____________</p>
<p>Position: ____________________</p>
</div>
<div class="form-part">
<div class="part-header">Part C: References</div>
<p>Reference 1: _________________</p>
<p>Reference 2: _________________</p>
</div>
</body>
Example 12: Product catalog with categories on separate pages
<style>
.product-category {
page-break-before: always;
}
.category-banner {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20pt;
font-size: 24pt;
font-weight: bold;
margin-bottom: 20pt;
}
.product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15pt;
}
</style>
<body>
<div class="product-category">
<div class="category-banner">Electronics</div>
<div class="product-grid">
<div>Product 1</div>
<div>Product 2</div>
</div>
</div>
<div class="product-category">
<div class="category-banner">Home & Garden</div>
<div class="product-grid">
<div>Product 3</div>
<div>Product 4</div>
</div>
</div>
</body>
Example 13: Conference agenda with daily schedules
<style>
.conference-day {
page-break-before: always;
}
.day-header {
background-color: #fef3c7;
border-left: 5pt solid #f59e0b;
padding: 15pt;
margin-bottom: 20pt;
}
.day-title {
font-size: 20pt;
font-weight: bold;
color: #92400e;
}
.day-date {
font-size: 14pt;
color: #b45309;
}
</style>
<body>
<div class="conference-day">
<div class="day-header">
<div class="day-title">Day 1</div>
<div class="day-date">Monday, March 15, 2025</div>
</div>
<p>9:00 AM - Opening Keynote</p>
<p>10:30 AM - Workshop Session A</p>
</div>
<div class="conference-day">
<div class="day-header">
<div class="day-title">Day 2</div>
<div class="day-date">Tuesday, March 16, 2025</div>
</div>
<p>9:00 AM - Technical Sessions</p>
<p>2:00 PM - Panel Discussion</p>
</div>
</body>
Example 14: Legal document with articles on separate pages
<style>
.article {
page-break-before: always;
padding: 30pt;
}
.article-number {
font-size: 48pt;
color: #d1d5db;
font-weight: 300;
line-height: 1;
}
.article-title {
font-size: 20pt;
font-weight: bold;
margin: 10pt 0 20pt 0;
color: #1f2937;
}
.article-text {
text-align: justify;
line-height: 1.8;
font-size: 11pt;
}
</style>
<body>
<div class="article">
<div class="article-number">Article I</div>
<h2 class="article-title">Scope and Purpose</h2>
<div class="article-text">
<p>This agreement establishes the terms...</p>
</div>
</div>
<div class="article">
<div class="article-number">Article II</div>
<h2 class="article-title">Obligations of the Parties</h2>
<div class="article-text">
<p>Both parties agree to fulfill...</p>
</div>
</div>
</body>
Example 15: Annual report with financial tables
<style>
.financial-section {
page-break-before: always;
}
.section-header {
background-color: #1e3a8a;
color: white;
padding: 15pt;
font-size: 20pt;
font-weight: bold;
margin-bottom: 25pt;
}
.financial-table {
width: 100%;
border-collapse: collapse;
}
.financial-table th {
background-color: #e5e7eb;
padding: 10pt;
text-align: left;
font-weight: bold;
}
.financial-table td {
padding: 8pt;
border-bottom: 1pt solid #d1d5db;
}
</style>
<body>
<div class="financial-section">
<div class="section-header">Balance Sheet</div>
<table class="financial-table">
<thead>
<tr>
<th>Account</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Total Assets</td>
<td>$1,250,000</td>
</tr>
</tbody>
</table>
</div>
<div class="financial-section">
<div class="section-header">Income Statement</div>
<table class="financial-table">
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Total Revenue</td>
<td>$850,000</td>
</tr>
</tbody>
</table>
</div>
</body>
See Also
- page-break-after - Control page breaks after elements
- page-break-inside - Control page breaks within elements
- break-before - Modern alternative with more options
- break-after - Modern page and column break control
- page - Specify named page for element
- @page rule - Define page properties and margins