Finding your way through a long document / Cover page
A cover page with its own margins and no header or footer
The first page of a long document, which usually wants different margins, no running header and no page number, and therefore needs its own page rule.
Why this block is harder than it looks
A cover page is the one page in a document that disagrees with all the others about the page setup. It wants generous margins, often a full-bleed panel, no running header, no folio, and frequently a different orientation of the visual weight. If you build it as the first block of the body, it inherits the page rule that was written for the body and you end up with a footer saying page one of twenty-four under a title. The mechanism that fixes this is a named page, and it is not widely known even though it is the tidiest thing in paged CSS.
The decisions that make it work
Reasons rather than a description of the code. Each of these is a choice that has a wrong answer, and the wrong answer is usually the default.
- Define a named page for the cover and apply it to the cover element. Everything about that page, margins and margin boxes included, is then separate from the body.
- Empty the margin boxes on the named page rather than trying to suppress the footer with a selector. Content in a margin box comes from the page rule, so it is removed there.
- Start the page counter after the cover if the cover should not count. Reset the counter on the first body page and the folio arithmetic works out.
- Force a break after the cover so the body always starts on a fresh page regardless of how tall the cover content turned out.
- Position cover content against the page rather than in the flow if it needs to sit at a specific height. Vertical centring inside a full-height block is more predictable than a stack of margins.
- Set the title to wrap rather than shrink. A long project name at a large size wants two lines, not a smaller size, and a size that changes with content is a size you cannot design around.
The fragment
Markup and the CSS it needs, and nothing else. It expects a document that already has a page rule and a base stylesheet, so paste it into one rather than opening it on its own.
<section class="cover">
<p class="kicker">Structural condition survey</p>
<h1>Callow Works, Bridge Street</h1>
<p class="meta">Prepared for Wynne and Hall Ltd<br>14 March 2026</p>
</section>
<article class="body"> ... </article>
<style>
@page cover {
size: A4;
margin: 30mm 25mm;
@bottom-left { content: ""; } /* no folio, no notice */
@bottom-right { content: ""; }
}
@page {
size: A4;
margin: 22mm 20mm 26mm;
@bottom-right { content: counter(page); font-size: 8pt; }
}
.cover {
page: cover;
break-after: page;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.cover h1 { font-size: 30pt; line-height: 1.15; margin: 6pt 0 0; }
.cover .kicker { font-size: 9pt; letter-spacing: 0.1em; text-transform: uppercase; }
.cover .meta { margin-top: 24pt; font-size: 10pt; }
.body { counter-reset: page 1; } /* body starts at page 1 */
</style>What breaks when it is built the obvious way
Hiding the running header on the cover with a selector on the content. The header is not in the content, it is in the page margin box, so nothing you write about the body reaches it. A named page is the only route, and reaching for display: none is the sign that the named page was not known about.
How to prove it survived pagination
Render and look at the second page as well as the first. The cover should have no folio, the body should start at the number you intended, and the body margins should be the body's rather than the cover's. The second of those three is the one that is usually wrong.
Where it sits in a finished document
This page is one block. The document it belongs to has a page rule, a base stylesheet, a header and everything else around it, and repeating all of that here would make thirty pages that say the same thing. The multi-page report template is a complete file with this block already in it, so take that and change the fragment rather than assembling one from parts. The property doing most of the work here is covered on its own page, with the support caveats that belong there rather than here.
Frequently asked
Will this fragment work on its own?
Not as a whole document. It has no page rule, no margins and no base type, because those belong to the document rather than to the block, and duplicating them in every fragment would mean thirty copies to keep in step. Paste it into a template that already has them.
Why does it look right in a browser and wrong in the PDF?
Because a browser window is one continuous surface and a document is a stack of fixed rectangles. Nothing in a scrolling view exercises a page boundary, so every break rule in the fragment is inert until the content is paginated. Render the real thing with enough content to cross two or three boundaries, then look.
Do I need a special option on the render request for this?
No. Everything on this page is CSS and markup, which is your side of the boundary. What the render has to give you is a real page size with real margins, and after that the layout is decided by the stylesheet.
Other parts of a document
The blocks that sit next to this one, and one from the next group along so you are not sealed inside a single kind of problem.
A table of contents with page numbers and leader dots
A list of headings with the page each one starts on, which cannot be written by hand because the page numbers do not exist until the document has been laid out.
Page 3 of 12 in a footer, on every page but the cover
The folio, printed in a page margin box, usually as a number and a total, and usually required to be absent from the first page.
A running header that shows the current section on every page
A line at the top of each page carrying the document title and, ideally, the section the reader is currently inside.
A DRAFT watermark on every page that does not obscure the text
A large word set diagonally behind the content on every page, used to mark a document as a draft, a copy or a specimen.
Multi-page report, as a complete file
The whole document with this block already in place, ready to copy and change.
page (named pages) in paged output
The property carrying the weight here, with its real support status.
Every part of a document
The full list, grouped by the kind of problem the block poses.
Paste the fragment into the playground inside a page rule and see what it does at a real page size. That is the only way any of this gets confirmed.