Page Header

Live Preview

Kembali ke Dashboard

22 Mar 2026

Settlement

Ringkasan penjualan untuk toko SudirmanLive

The page header establishes context and hierarchy at the top of every page. It uses the serif title font to create editorial weight and clearly distinguish the page-level heading from all other content.

Anatomy

+----------------------------------------------------------+
|                                                          |
|  < Kembali ke Penjualan            [ + Transaksi Baru ] |
|                                                          |
|  22 Mar 2026                                             |
|  Laporan Penjualan Harian                                |
|  Ringkasan penjualan untuk toko Sudirman  ● Live         |
|                                                          |
+----------------------------------------------------------+
                    32px margin-bottom

Elements

Breadcrumb / Back Link

Small, gray text that provides navigation context. Uses a left arrow.

<a href="/sales" className="inline-flex items-center gap-1.5 text-[13px] text-text-2 hover:text-text-1 transition-colors">
  <ChevronLeft size={14} strokeWidth={2} />
  Kembali ke Penjualan
</a>

Date (Optional)

Displayed in monospace above the title for date-specific pages (daily reports, shift summaries).

<span className="font-mono text-[12px] text-text-3 tracking-wide">
  22 Mar 2026
</span>

Page Title

The single most prominent text element on the page. Uses Lora at 32px.

<h1 className="font-serif text-[32px] font-normal leading-[1.1] tracking-[-0.02em] text-text-1">
  Laporan Penjualan Harian
</h1>

Subtitle (Optional)

A brief description below the title. Uses Inter at 15px.

<p className="text-[15px] text-text-2 mt-1">
  Ringkasan penjualan untuk toko Sudirman
</p>

Live Indicator (Optional)

A pulsing green dot next to the subtitle for real-time pages.

<span className="inline-flex items-center gap-2 text-[13px] text-text-2">
  Ringkasan penjualan untuk toko Sudirman
  <span className="relative flex h-2 w-2">
    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-40" />
    <span className="relative inline-flex rounded-full h-2 w-2 bg-success" />
  </span>
  <span className="text-success text-[11px] font-medium">Live</span>
</span>

Action Button (Optional)

Primary action for the page, positioned top-right. Uses the filled green button style.

<button className="bg-brand hover:bg-brand-hover text-white text-[13px] font-semibold px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
  <Plus size={16} strokeWidth={2} />
  Transaksi Baru
</button>

Full Component

interface PageHeaderProps {
  backLink?: { label: string; href: string };
  date?: string;
  title: string;
  subtitle?: string;
  live?: boolean;
  action?: React.ReactNode;
}

export function PageHeader({ backLink, date, title, subtitle, live, action }: PageHeaderProps) {
  return (
    <div className="mb-8">
      {/* Top row: back link + action */}
      <div className="flex items-center justify-between mb-4">
        {backLink && (
          <a href={backLink.href} className="inline-flex items-center gap-1.5 text-[13px] text-text-2 hover:text-text-1">
            <ChevronLeft size={14} strokeWidth={2} />
            {backLink.label}
          </a>
        )}
        {action && <div className="ml-auto">{action}</div>}
      </div>

      {/* Date */}
      {date && (
        <span className="font-mono text-[12px] text-text-3 tracking-wide block mb-1">
          {date}
        </span>
      )}

      {/* Title */}
      <h1 className="font-serif text-[32px] font-normal leading-[1.1] tracking-[-0.02em] text-text-1">
        {title}
      </h1>

      {/* Subtitle */}
      {subtitle && (
        <p className="text-[15px] text-text-2 mt-1 flex items-center gap-2">
          {subtitle}
          {live && (
            <>
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute h-full w-full rounded-full bg-success opacity-40" />
                <span className="relative rounded-full h-2 w-2 bg-success" />
              </span>
              <span className="text-success text-[11px] font-medium">Live</span>
            </>
          )}
        </p>
      )}
    </div>
  );
}

Spacing

Element	Spacing
Back link to title area	16px (mb-4)
Date to title	4px (mb-1)
Title to subtitle	4px (mt-1)
Page header to content	32px (mb-8)

DO and DON'T

DO

• Use Lora for the page title --- it is the only place this font appears
• Include a back link when the page is a sub-page (detail view, form, report)
• Use monospace for dates above the title
• Keep subtitles to one line

DON'T

• Don't use Lora for anything other than the page-level title
• Don't put more than one action button in the header (use a dropdown for multiple actions)
• Don't skip the page header --- every page needs a clear title
• Don't use the page header inside cards or modals --- it is a page-level element only