We use cookies
We use cookies to enhance your experience and analyse site usage.
Business report with header, executive summary, metrics grid, and content area.
<!DOCTYPE html>
<html>
<head>
<style>
@page { size: A4; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, sans-serif; color: #1e293b; }
.cover { background: linear-gradient(160deg, #0f172a 60%, #1e3a5f); color: white; padding: 64px 56px; min-height: 200px; }
.cover .tag { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 16px; }
.cover h1 { font-size: 36px; font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
.cover p { font-size: 15px; color: rgba(255,255,255,.7); }
.meta-bar { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; padding: 14px 56px; display: flex; gap: 32px; font-size: 13px; color: #64748b; }
.meta-bar strong { color: #1e293b; }
.body { padding: 48px 56px; }
.section { margin-bottom: 40px; }
.section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #2563eb; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #dbeafe; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.metric { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; }
.metric .value { font-size: 28px; font-weight: 800; color: #1e293b; }
.metric .label { font-size: 12px; color: #64748b; margin-top: 4px; }
.metric .change { font-size: 12px; font-weight: 600; margin-top: 8px; }
.up { color: #16a34a; } .down { color: #dc2626; }
p { font-size: 14px; line-height: 1.8; color: #475569; }
</style>
</head>
<body>
<div class="cover">
<div class="tag">{{company_name}} · Monthly Report</div>
<h1>{{report_title}}</h1>
<p>Prepared for: {{recipient}} · {{report_month}} {{report_year}}</p>
</div>
<div class="meta-bar">
<span>Period: <strong>{{report_month}} {{report_year}}</strong></span>
<span>Prepared by: <strong>{{author}}</strong></span>
<span>Status: <strong>{{status}}</strong></span>
</div>
<div class="body">
<div class="section">
<div class="section-title">Executive Summary</div>
<p>{{executive_summary}}</p>
</div>
<div class="section-title">Key Metrics</div>
<div class="metrics">
<div class="metric"><div class="value">{{metric_1_value}}</div><div class="label">{{metric_1_label}}</div><div class="change up">↑ {{metric_1_change}}</div></div>
<div class="metric"><div class="value">{{metric_2_value}}</div><div class="label">{{metric_2_label}}</div><div class="change up">↑ {{metric_2_change}}</div></div>
<div class="metric"><div class="value">{{metric_3_value}}</div><div class="label">{{metric_3_label}}</div><div class="change down">↓ {{metric_3_change}}</div></div>
</div>
<div class="section">
<div class="section-title">Analysis</div>
<p>{{analysis_content}}</p>
</div>
<div class="section">
<div class="section-title">Next Steps</div>
<p>{{next_steps}}</p>
</div>
</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: A4; margin: 0; }\n * { box...",
"format": "A4"
}' \
--output monthly-report.pdf