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 &ndash; Mar 21, 2026</span>
      </div>
    </div>
  </div>
</header>

Details

Family

report-header

Tier

base

Kind

section

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.