Sample Document — Illustration Only
This page demonstrates every technique from the Document Generation HTML/CSS cheat sheet in one file. Switch to your browser's Print Preview to see the repeating header, footer, and page border in effect — they are hidden in normal screen view by design.
1 & 2. Repeating header and page border
The company logo above repeats at the top of every printed page, and a thin grey frame borders every page. Both are invisible right now because you're viewing this on screen — open Print Preview to see them.
3. Page numbers in the footer
The footer below repeats "Sample Document / Company Name" on every page. A true auto-incrementing page number would need @page { @bottom-right { content: counter(page); } } — supported only in some PDF rendering engines; test against yours before relying on it.
4. Checkbox styling
In a real template, the checked attribute is added conditionally based on the datakey's resolved value — see the cheat sheet for the Razor comparison pattern.
5. Fill-in blank lines
| Field label: | |
| Another field: |
Inline field:
Above: a boxed write-in area, e.g. for a signature.
6. Hiding blank/placeholder values
| Populated value | This cell is present in the layout but not drawn — try removing the class to see it appear. |
7. Page-break control
page-break-inside: avoid — it won't be split across a page boundary if it falls near the bottom of a page.
8. Footnotes (manual, in-flow)
This paragraph references a note.1
1 This is a manually placed footnote-style paragraph, not a true page-anchored footnote — see the cheat sheet for the limitation.
New page example
This heading was forced onto a new page using page-break-before: always.
9. Signature line with caption below
10. Inline blank inside a sentence
In the amount of U.S. $ for subscription of the Fund's Series Shares on , 20.
11. One shared underline for several field captions
12. Checkbox with an indented, conditional follow-up field
13. Nested outline / legal clause numbering
1. In the case of Commodity Interests, the amount of investments shall be the value of the initial margin.
(a) The amount of any outstanding indebtedness incurred to acquire the investments owned by such person; and
i. it is established and operated in its jurisdiction of residence exclusively for religious, charitable, scientific, or educational purposes.
15. Two-column checkbox grid (paired options)
Columns stay aligned automatically via CSS grid, even if option labels are different lengths. Override grid-template-columns inline (e.g. auto auto 1fr) for a compact Yes/No pair that shouldn't stretch across the full width.
16. Styling a single table component
Wrapping a table component token in a <div> with its own class lets that one table be styled without affecting any other table in the template. The sample below shows a Risk Assessment table styled this way.
| Risk Factor Group | Risk Factor | Input Value | Risk | Rating | Weight | Weighted | Algorithm |
|---|---|---|---|---|---|---|---|
| Product | Not assessed | 0.5 | 0 | sum | |||
| productType | Not assessed | 1 | |||||
| productBookingEntity | Not assessed | 1 | |||||
| Entity | Not assessed | 1 | 0 | max | |||
| legalEntityType | Not assessed | 1 | |||||
| Country | Low 1 | 1 | 1 | 1 | max | ||
| countryOfIncorporation | Low 1 | 1 | 1 | 1 | |||
| Ireland | Low 1 | 1 | |||||
| countryOfDomicile | Not assessed | 1 |
In a real template the wrapper contains the table component token (for example {%RiskAssessment%}) rather than a static table. Keep the token outside any <p> element so the table stays inside the wrapper.