report header analytics dashboard date-range report header analytics date range calendar title analytics page header with date range report title bar with date picker display
Report Header
Fetch pattern JSON:
curl https://webspire.de/patterns/report-header/base.json base.html
<header class="ws-report-header" style="--ws-report-header-bg: var(--ws-color-surface); --ws-report-header-text: var(--ws-color-text); --ws-report-header-text-soft: var(--ws-color-text-soft); --ws-report-header-border: var(--ws-color-border); --ws-report-header-accent: var(--ws-color-primary);">
<div class="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 class="text-2xl font-bold tracking-tight text-[var(--ws-report-header-text)]">Analytics Overview</h1>
<p class="mt-1 text-sm text-[var(--ws-report-header-text-soft)]">Track your key metrics and performance indicators.</p>
</div>
<div class="flex items-center gap-2 rounded-lg border border-[var(--ws-report-header-border)] bg-[var(--ws-report-header-bg)] px-4 py-2 text-sm text-[var(--ws-report-header-text)]">
<svg class="h-4 w-4 shrink-0 text-[var(--ws-report-header-text-soft)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
<span>Mar 1 – Mar 21, 2026</span>
</div>
</div>
</div>
</header>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
reportheaderanalyticsdashboarddate-range
Slots
| Name | Required | Description |
|---|---|---|
| title | Yes | Report title and subtitle. |
| dateRange | Yes | Date range display with calendar icon. |
A clean report page header with title and subtitle on the left and a date range display with calendar icon on the right. Stacks vertically on mobile.