Shipping label template, HTML and Handlebars
A printable shipping label with the ship-to address, the AWB number and a QR code to scan.
Free to copy. Send it from your app with POST /v1/pdfs/render and the slug shipping-label.
Template source
<div class="page">
<div class="label">
<p class="muted">Ship to</p>
<p class="to"><strong>{{ship_to.name}}</strong><br>{{ship_to.line1}}<br>{{ship_to.city}} {{ship_to.pin}}</p>
<p class="muted">From {{company.name}}, {{company.city}}</p>
<img src="{{qr shipment.awb}}" width="120" height="120" alt="AWB {{shipment.awb}}">
<p><strong>AWB {{shipment.awb}}</strong> · {{shipment.weight}} · {{shipment.pieces}} pieces</p>
</div>
</div>
<style>
@page { size: A4; margin: 18mm; }
body { font-family: Arial, Helvetica, sans-serif; color: #17181c; font-size: 12px; }
h1 { font-size: 22px; letter-spacing: 2px; margin: 0; }
.muted { color: #5a5c63; }
.head { display: flex; justify-content: space-between; margin-bottom: 24px; }
table.items { width: 100%; border-collapse: collapse; margin-top: 16px; }
table.items th { text-align: left; font-weight: normal; color: #5a5c63; border-bottom: 1.5px solid #17181c; padding: 6px 0; }
table.items td { padding: 8px 0; border-bottom: 1px solid #ece9e2; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.total { margin-top: 12px; text-align: right; font-size: 15px; font-weight: bold; }
.label { border: 2px solid #17181c; padding: 18px; width: 90mm; }
.to { font-size: 16px; line-height: 1.5; }
</style>Sample data (JSON)
{
"company": {
"name": "Kestrel Foods Pvt Ltd",
"city": "Bengaluru, Karnataka",
"gstin": "29ABCDE1234F1Z5"
},
"ship_to": {
"name": "Priya Menon",
"line1": "14 CMH Road, Indiranagar",
"city": "Bengaluru",
"pin": "560038"
},
"shipment": {
"awb": "SRC8841207",
"weight": "12.4 kg",
"pieces": 3
}
}