We use cookies
We use cookies to enhance your experience and analyse site usage.
Compact shipping label with from/to addresses, barcode placeholder, and tracking number.
<!DOCTYPE html>
<html>
<head>
<style>
@page { size: 4in 6in; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, sans-serif; width: 4in; height: 6in; padding: 16px; border: 2px solid #000; }
.carrier { text-align: center; font-size: 22px; font-weight: 900; letter-spacing: .05em; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 10px; }
.service { text-align: center; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: #000; color: white; padding: 4px 0; margin-bottom: 12px; }
.section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #666; margin-bottom: 4px; }
.address { margin-bottom: 14px; }
.address .name { font-size: 15px; font-weight: 700; }
.address .line { font-size: 13px; line-height: 1.5; }
.divider { border-top: 1px dashed #999; margin: 10px 0; }
.barcode-area { text-align: center; background: #f5f5f5; border: 1px solid #ddd; padding: 16px; margin: 12px 0; }
.barcode-placeholder { font-size: 11px; color: #999; }
.barcode-lines { font-size: 28px; letter-spacing: 2px; color: #000; margin-bottom: 6px; }
.tracking { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.weight-class { display: flex; justify-content: space-between; font-size: 11px; margin-top: 12px; color: #555; }
</style>
</head>
<body>
<div class="carrier">{{carrier_name}}</div>
<div class="service">{{service_level}}</div>
<div class="address">
<div class="section-label">From:</div>
<div class="name">{{sender_name}}</div>
<div class="line">{{sender_address}}</div>
</div>
<div class="divider"></div>
<div class="address">
<div class="section-label">Ship To:</div>
<div class="name" style="font-size:18px;">{{recipient_name}}</div>
<div class="line" style="font-size:15px;">{{recipient_address}}</div>
</div>
<div class="barcode-area">
<div class="barcode-lines">|||||||||||||||||||||||</div>
<div class="tracking">{{tracking_number}}</div>
<div class="barcode-placeholder">Scan at delivery</div>
</div>
<div class="weight-class">
<span>Weight: {{weight}}</span>
<span>Dims: {{dimensions}}</span>
<span>Ref: {{reference}}</span>
</div>
</body>
</html>Sign in to open this template in the playground, or copy the HTML and use it with the API.
curl -X POST https://api.htmlpdf.dev/api/pdf \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!DOCTYPE html>\n<html>\n<head>\n<style>\n @page { size: 4in 6in; margin: 0; }\n * ...",
"format": "A4"
}' \
--output shipping-label.pdf