Correspondence and reporting / A4
School report card HTML template
Subject rows with an attainment grade, an effort grade and a teacher comment, plus an attendance summary and a grade key on the page.
When this document is the right one
The end of a term or a year. It is read once carefully by a parent, kept, and sometimes produced years later, so it has to be legible without any context that was current when it was written.
Why each part is there
The fields are visible in the markup. What is not visible is why they are present, which is the part that gets removed first when someone adapts a template for their own use.
- Attainment and effort as two separate grades, because a pupil working hard at a low grade and one coasting at a high one need different conversations.
- A teacher comment per subject that says what the next step is, rather than restating the grade in words.
- The grade key printed on the report, since a report that travels without its key is a page of letters and numbers.
- Attendance as figures, because it is the strongest single predictor of everything else on the page.
- A tutor summary that names one thing to work on, which is the part the family will actually act on.
The template
A complete file. Doctype, stylesheet, body: paste it into a renderer unchanged and it produces a finished A4 page. Replace the sample data and the styling holds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Report, Summer term 2026</title>
<style>
@page { size: A4; margin: 16mm 15mm 20mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 9.5pt/1.45 Georgia, "Times New Roman", serif; color: #1c1a17; }
header { text-align: center; border-bottom: 2px solid #1c1a17; padding-bottom: 5mm; }
.school { font-size: 15pt; font-weight: 700; }
.school small { display: block; font-size: 8pt; font-weight: 400; color: #6b645a;
margin-top: 1mm; }
h1 { margin: 4mm 0 0; font: 700 10pt/1 Arial, sans-serif; text-transform: uppercase;
letter-spacing: 0.14em; }
.pupil { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5mm; margin: 6mm 0;
font: 9pt/1.4 Arial, sans-serif; }
.pupil .k { font-size: 7pt; text-transform: uppercase; letter-spacing: 0.07em;
color: #6b645a; }
table { width: 100%; border-collapse: collapse; }
thead { display: table-header-group; }
th { text-align: left; font: 700 7.5pt/1.2 Arial, sans-serif; text-transform: uppercase;
letter-spacing: 0.05em; color: #6b645a; border-bottom: 1.5px solid #1c1a17;
padding-bottom: 2mm; }
td { padding: 3mm 3mm 3mm 0; border-bottom: 1px solid #e3ded5; vertical-align: top; }
tr { break-inside: avoid; }
.grade { text-align: center; font: 700 13pt/1 Arial, sans-serif; width: 16mm; }
.effort { text-align: center; width: 16mm; font: 9pt Arial, sans-serif; }
.comment { font-size: 9pt; }
/* The grade key is on the page rather than in a separate letter, because a
report that travels without its key is a page of letters. */
.key { margin-top: 6mm; border: 1px solid #d5cec2; padding: 3.5mm; font: 8pt/1.4 Arial, sans-serif;
break-inside: avoid; display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.key strong { display: block; margin-bottom: 1mm; }
.summary { margin-top: 7mm; break-inside: avoid; }
.summary h2 { font: 700 9pt/1 Arial, sans-serif; text-transform: uppercase;
letter-spacing: 0.08em; color: #6b645a; margin: 0 0 2mm; }
.attendance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm;
margin: 4mm 0; font: 9pt Arial, sans-serif; }
.attendance div { border: 1px solid #d5cec2; padding: 3mm; text-align: center; }
.attendance .v { font-size: 15pt; font-weight: 700; font-variant-numeric: tabular-nums; }
.sign { margin-top: 8mm; display: grid; grid-template-columns: 1fr 1fr; gap: 10mm;
break-inside: avoid; font: 8.5pt Arial, sans-serif; }
.sign div { border-top: 1px solid #1c1a17; padding-top: 1.5mm; margin-top: 14mm;
color: #6b645a; }
</style>
</head>
<body>
<header>
<div class="school">Riverside Academy<small>Bath · Local authority number 8842</small></div>
<h1>End of year report</h1>
</header>
<div class="pupil">
<div><div class="k">Pupil</div>Amara Osei</div>
<div><div class="k">Year and form</div>Year 9, 9B</div>
<div><div class="k">Form tutor</div>Ms R. Lindley</div>
<div><div class="k">Academic year</div>2025 to 2026</div>
</div>
<table>
<thead>
<tr><th>Subject</th><th style="text-align:center">Grade</th>
<th style="text-align:center">Effort</th><th>Teacher comment</th></tr>
</thead>
<tbody>
<tr>
<td>English</td><td class="grade">6</td><td class="effort">2</td>
<td class="comment">Amara writes with a clarity that is unusual at this stage and
argues a point well. The next step is evidence: an argument this strong deserves
more quotation to support it.</td>
</tr>
<tr>
<td>Mathematics</td><td class="grade">5</td><td class="effort">1</td>
<td class="comment">Consistent and improving. Algebraic manipulation is secure.
Marks are being lost to arithmetic slips rather than to method, which is
addressed by checking rather than by more practice.</td>
</tr>
<tr>
<td>Science</td><td class="grade">6</td><td class="effort">1</td>
<td class="comment">Excellent practical work and careful recording. Amara is
ready for the separate sciences and I would encourage that choice.</td>
</tr>
<tr>
<td>Art and design</td><td class="grade">7</td><td class="effort">1</td>
<td class="comment">Outstanding. The ceramics unit produced work well beyond the
expectation for the year group, and the sketchbook shows the thinking behind it.</td>
</tr>
<tr>
<td>History</td><td class="grade">5</td><td class="effort">3</td>
<td class="comment">Capable of considerably more. Homework has been late four
times this term and the gap between class work and assessed work reflects it.</td>
</tr>
</tbody>
</table>
<div class="key">
<div><strong>Grades</strong>1 to 9, where 9 is highest. The grade shows attainment
against the national expectation for the year group, not against the class.</div>
<div><strong>Effort</strong>1 excellent, 2 good, 3 inconsistent, 4 causing concern.
Effort is judged against what this pupil is capable of.</div>
</div>
<section class="summary">
<h2>Attendance</h2>
<div class="attendance">
<div><div class="v">96.4%</div>Attendance</div>
<div><div class="v">7</div>Sessions absent</div>
<div><div class="v">2</div>Late marks</div>
</div>
<h2>Form tutor summary</h2>
<p style="margin:0">
A good year. Amara has settled well into the upper school and has found a real
strength in the art department. The one thing to watch is history, where the issue
is organisation rather than ability: a homework diary that is actually used would
close most of that gap before September.
</p>
</section>
<div class="sign">
<div>Form tutor</div>
<div>Head of year</div>
</div>
</body>
</html>The layout decision worth understanding
The grade key is on the page rather than in a covering letter, in a bordered block with break-inside: avoid. Reports get separated from their covering letters immediately and permanently, and a grading scale that only exists in the letter is a scale that does not exist.
The mistake people make adapting it
Comments that could apply to any pupil. A generated report where four subjects say the same encouraging sentence tells the family that nobody looked, and it undermines the one comment that was written carefully.
Rendering it
The page box is declared in the template's own CSS as A4, so the size travels with the markup rather than living in the code that calls the renderer. A4 is also one of the six named formats the API accepts, so it can be passed in the request options instead if that suits your setup better.
curl -X POST https://api.pdfpipe.xyz/v1/pdf \
-H "Authorization: Bearer $PDFPIPE_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!doctype html>...",
"options": { "format": "A4" }
}' \
--output report-card.pdfFrequently asked
Can I use this template commercially?
Yes. Copy it, change it, ship it. It is sample markup written to be taken, and the sample data in it is invented, so replace the names and the numbers before anyone sees it.
Why is the page size in the CSS rather than in the API call?
Because a school report is a A4 document, and that is a property of the document rather than of the code that renders it. Declaring it in the page box means the size cannot be lost between the template and the call, which is the usual way a document ends up on the wrong paper.
Will it look the same in every renderer?
The layout will, because it uses ordinary CSS. The page break behaviour will not: break-inside and break-after are implemented differently by browser engines and by dedicated print engines, and some of the paged media specification is not implemented in browser renders at all. That difference is documented per property in the paged CSS reference.
Other templates
Documents from the same part of a business, and one from each of the other groups.
Business letter HTML template with letterhead
A formal letter with a letterhead on the first page only and a recipient address positioned for a window envelope.
Multi-page PDF report HTML template
A structured report with a full-bleed cover, a contents page, automatically numbered sections and figures, and body pages that flow.
Meeting minutes HTML template
Numbered agenda items with decisions pulled out of the narrative, and an actions table with an owner and a date on every row.
HTML invoice template with CSS
The standard commercial invoice: a demand for payment with line items, a tax figure, and terms that say when the money is due.
Payment receipt HTML template
Proof that a payment was made: the amount, the payment reference, the method, and what it was for.
Quotation HTML template with CSS
A priced proposal with a validity date, a scope, optional items kept out of the headline total, and somewhere to sign.
Packing slip HTML template
The document that goes in the box: what was ordered, what was actually shipped, and no prices at all.
Every template
The full set, grouped by what part of a business produces the document.
A4 page size for PDF generation
A4 is the default page for business documents everywhere except North America, and the default this API uses when no format is given.
Paste the template into the playground and get the PDF back. No signup, no key.