Selling and buying / A4
Product datasheet PDF template
A two-column technical specification sheet with a revision number, grouped tables, a dimensions figure and an ordering code.
When this document is the right one
A technical product is specified into a design or a tender. The reader is an engineer looking for one row, not a buyer reading a brochure, and the whole layout follows from that difference.
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.
- A revision number and the revision it supersedes, so two copies in circulation can be told apart. A datasheet without one is impossible to cite.
- Specification tables grouped by concern, because an engineer looking for the ingress rating is not reading the electrical section.
- A dimensions figure, since a specification that cannot be checked against a space is incomplete.
- An ordering code broken into its parts with an example, which is what turns a specification into a purchase.
- A disclaimer stating that the datasheet is not a contract specification, because it will otherwise be treated as one.
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>DPT-200 pressure transmitter, datasheet</title>
<style>
@page { size: A4; margin: 15mm 14mm 18mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 8.5pt/1.4 Arial, sans-serif; color: #14181c; }
header { display: grid; grid-template-columns: 1fr auto; gap: 8mm;
border-bottom: 3px solid #14181c; padding-bottom: 5mm; }
h1 { margin: 0; font-size: 20pt; letter-spacing: -0.01em; }
.model { font-size: 11pt; color: #5a6672; margin-top: 1mm; }
.rev { text-align: right; font-size: 8pt; color: #5a6672; }
.lede { margin: 5mm 0 6mm; font-size: 9.5pt; max-width: 130mm; }
/* Two columns for the specification tables, because a datasheet is scanned
for one row rather than read, and a narrow measure is easier to scan. */
.cols { column-count: 2; column-gap: 8mm; }
section { break-inside: avoid-column; margin-bottom: 5mm; }
h2 { font-size: 8pt; text-transform: uppercase; letter-spacing: 0.09em;
margin: 0 0 2mm; padding-bottom: 1mm; border-bottom: 1.5px solid #14181c;
break-after: avoid; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 1.2mm 0; border-bottom: 1px solid #e2e7eb;
vertical-align: top; }
th { font-weight: 400; color: #5a6672; width: 42%; }
td { font-variant-numeric: tabular-nums; }
.figure { break-inside: avoid; margin-bottom: 5mm; }
.figure .box { height: 42mm; border: 1px solid #cdd5dc; background: #f5f8fa; }
.figure figcaption { font-size: 7.5pt; color: #5a6672; margin-top: 1.5mm; }
.ordering { column-span: all; margin-top: 4mm; break-inside: avoid;
border: 1px solid #cdd5dc; padding: 4mm; }
.ordering table th, .ordering table td { border-bottom: 1px solid #e2e7eb;
padding: 1.5mm 2mm; }
.ordering th { width: auto; color: #14181c; font-weight: 700; }
footer { margin-top: 6mm; border-top: 1px solid #e2e7eb; padding-top: 3mm;
font-size: 7pt; color: #5a6672; }
</style>
</head>
<body>
<header>
<div>
<h1>Digital pressure transmitter</h1>
<div class="model">DPT-200 series</div>
</div>
<div class="rev">
Datasheet DS-DPT200<br>Revision 6, May 2026<br>Supersedes revision 5
</div>
</header>
<p class="lede">
A two-wire loop-powered transmitter for gauge and absolute pressure in process and
utility applications. Stainless wetted parts, digital compensation across the full
temperature range, and a calibration certificate traceable to national standards
supplied with every unit.
</p>
<div class="cols">
<section>
<h2>Measurement</h2>
<table>
<tr><th>Ranges</th><td>0 to 1, 6, 16, 60, 250 bar</td></tr>
<tr><th>Accuracy</th><td>0.25% of span, terminal point</td></tr>
<tr><th>Long-term stability</th><td>0.1% of span per year</td></tr>
<tr><th>Over-pressure limit</th><td>2x span, 3x burst</td></tr>
<tr><th>Response time</th><td>10 ms to 90%</td></tr>
</table>
</section>
<section>
<h2>Electrical</h2>
<table>
<tr><th>Output</th><td>4 to 20 mA, two wire</td></tr>
<tr><th>Supply</th><td>10 to 30 V DC</td></tr>
<tr><th>Load</th><td>(Vsupply - 10) / 0.02 ohm</td></tr>
<tr><th>Protection</th><td>Reverse polarity, short circuit</td></tr>
</table>
</section>
<div class="figure">
<div class="box"></div>
<figcaption>Figure 1. Dimensions in millimetres. G1/2 process connection shown;
NPT and flush diaphragm variants differ in overall length.</figcaption>
</div>
<section>
<h2>Environmental</h2>
<table>
<tr><th>Process temperature</th><td>-30 to +125 C</td></tr>
<tr><th>Ambient temperature</th><td>-25 to +80 C</td></tr>
<tr><th>Compensated range</th><td>0 to +70 C</td></tr>
<tr><th>Ingress protection</th><td>IP67</td></tr>
<tr><th>Vibration</th><td>10 g, 10 to 2000 Hz</td></tr>
</table>
</section>
<section>
<h2>Materials</h2>
<table>
<tr><th>Wetted parts</th><td>316L stainless steel</td></tr>
<tr><th>Diaphragm</th><td>316L, welded</td></tr>
<tr><th>Housing</th><td>304 stainless steel</td></tr>
<tr><th>Seal</th><td>FKM, EPDM on request</td></tr>
<tr><th>Weight</th><td>210 g typical</td></tr>
</table>
</section>
</div>
<section class="ordering">
<h2>Ordering code</h2>
<table>
<tr><th>DPT-200</th><td>Series</td>
<th>-016</th><td>Range in bar</td>
<th>-G12</th><td>Process connection</td>
<th>-V</th><td>Seal material</td></tr>
</table>
<p style="margin:2mm 0 0;font-size:7.5pt">
Example: DPT-200-016-G12-V is a 16 bar unit with a G1/2 connection and an FKM seal.
Ranges and connections not listed are available to order; contact sales with the
application rather than the code.
</p>
</section>
<footer>
Specifications are subject to change without notice. Data given is typical at 25 C
unless stated otherwise. This datasheet is not a specification for a contract:
where a contract references a performance figure, the figure in the contract governs.
</footer>
</body>
</html>The layout decision worth understanding
Two CSS columns with break-inside: avoid-column on each section, so a table never starts at the bottom of one column and finishes at the top of the next. The ordering code block uses column-span: all, which is the one place the two-column flow is deliberately broken because the code reads across.
The mistake people make adapting it
Publishing without a revision number and then correcting a figure. Both versions are now in circulation, they disagree, and there is no way for a reader to tell which one they are holding. Revision, date and superseded-revision are three fields and they prevent an entire category of dispute.
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 datasheet.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 product datasheet 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.
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.
Purchase order HTML template
Issued by the buyer: an instruction to supply specific goods at specific prices, with separate delivery and invoicing addresses and the conditions of the order.
Trade price list PDF template
A dated catalogue of prices by item code, usually with a second column for volume, issued to trade accounts.
Order confirmation HTML template
Sent to the buyer after an order is placed: what was ordered, what it cost, and above all when it will arrive.
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.
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.