Open demo

CSS code

HTML 
<div><span class="lbl">App header with actions</span>
<header class="ph">
  <div class="ph-main">
    <nav class="ph-crumbs" aria-label="Breadcrumb">
      <ol>
        <li><a href="#">Workspace</a></li>
        <li><a href="#">Billing</a></li>
        <li aria-current="page">Invoices</li>
      </ol>
    </nav>
    <h1>Invoices</h1>
    <p class="ph-sub">42 open · $18,240 outstanding</p>
  </div>
  <div class="ph-actions">
    <a class="ph-btn" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Export CSV</a>
    <a class="ph-btn ph-btn-primary" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14"/></svg>New invoice</a>
  </div>
</header></div>

<div><span class="lbl">Article hero band</span>
<header class="ph ph-hero">
  <nav class="ph-crumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Integrations</a></li>
      <li aria-current="page">Webhooks</li>
    </ol>
  </nav>
  <h1>Configuring webhooks</h1>
  <p class="ph-sub">Updated 12 September 2026 · 6 min read</p>
</header></div>

<div><span class="lbl">Detail header with back button</span>
<header class="ph ph-detail">
  <div class="ph-main">
    <a class="ph-back" href="#" aria-label="Back to Orders"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 12H5M11 6l-6 6 6 6"/></svg></a>
    <div>
      <nav class="ph-crumbs" aria-label="Breadcrumb">
        <ol>
          <li><a href="#">Store</a></li>
          <li><a href="#">Orders</a></li>
          <li aria-current="page">#10482</li>
        </ol>
      </nav>
      <h1>Order #10482 <span class="ph-badge">Paid</span></h1>
    </div>
  </div>
  <div class="ph-actions">
    <a class="ph-btn" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 9V3h10v6M7 17H4v-7h16v7h-3M7 14h10v7H7z"/></svg>Print</a>
    <a class="ph-btn" href="#">Issue refund</a>
  </div>
</header></div>
CSS 
/* Page headers with a breadcrumb above the title. The breadcrumb is nav > ol; its chevrons are
   li + li::before painted through a mask, so screen readers do not read them. */
.ph{--ph-accent:#6d28d9;--ph-accent-dark:#5b21b6;--ph-link:#64748b;--ph-text:#0f172a;--ph-muted:#526077;--ph-line:#e2e7f0;
  --ph-chevron:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>");
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px;
  padding:22px 26px;background:#fff;border:1px solid var(--ph-line);border-radius:16px;color:var(--ph-text)}
.ph-main{min-width:0}
.ph-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .4rem;margin:0 0 .55rem;padding:0;list-style:none;font-size:.8125rem;line-height:1.5}
.ph-crumbs li{display:inline-flex;align-items:center;gap:.4rem;color:var(--ph-link)}
.ph-crumbs li+li::before{content:"";flex:none;width:13px;height:13px;background:#94a3b8;mask:var(--ph-chevron) center/contain no-repeat}
.ph-crumbs a{color:var(--ph-link);text-decoration:none;border-radius:4px;transition:color .15s}
.ph-crumbs a:hover{color:var(--ph-accent);text-decoration:underline;text-underline-offset:3px}
.ph-crumbs [aria-current="page"]{color:#334155;font-weight:500}
.ph h1{margin:0;font-size:1.6rem;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.ph-sub{margin:.35rem 0 0;color:var(--ph-muted);font-size:.9rem}
.ph-actions{display:flex;flex-wrap:wrap;gap:10px}
.ph-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border:1px solid #cbd5e1;border-radius:10px;background:#fff;
  color:#334155;font-family:inherit;font-size:.875rem;font-weight:600;line-height:1.25;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s}
.ph-btn:hover{background:#f8fafc;border-color:#94a3b8}
.ph-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ph-btn-primary{background:var(--ph-accent);border-color:var(--ph-accent);color:#fff;box-shadow:0 4px 12px -4px rgba(109,40,217,.5)}
.ph-btn-primary:hover{background:var(--ph-accent-dark);border-color:var(--ph-accent-dark)}
.ph a:focus-visible,.ph-btn:focus-visible{outline:2px solid var(--ph-accent);outline-offset:2px}
/* hero band: tinted gradient, slash separators, meta line */
.ph-hero{display:block;padding:34px 30px;border:0;background:linear-gradient(135deg,#f5f3ff 0%,#ede9fe 55%,#e0e7ff 100%)}
.ph-hero .ph-crumbs li+li::before{background:#8b5cf6;mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'><path d='M10.5 2 5.5 14'/></svg>")}
.ph-hero .ph-crumbs a{color:var(--ph-accent-dark);font-weight:500}
.ph-hero .ph-crumbs a:hover{color:#4c1d95}
.ph-hero .ph-crumbs [aria-current="page"]{color:#3b0764}
.ph-hero h1{font-size:2rem;margin-top:.15rem}
.ph-hero .ph-sub{color:#4c4a63}
/* detail header: back button beside the breadcrumb and title, status badge */
.ph-detail{align-items:center}
.ph-detail .ph-main{display:flex;align-items:center;gap:16px}
.ph-back{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #cbd5e1;border-radius:12px;color:#334155;transition:background-color .15s}
.ph-back:hover{background:#f5f3ff;color:var(--ph-accent)}
.ph-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ph-detail .ph-crumbs ol{margin-bottom:.2rem}
.ph-detail h1{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:1.35rem}
.ph-badge{padding:.2rem .6rem;border-radius:999px;background:#dcfce7;color:#166534;font-size:.75rem;font-weight:600;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.ph-crumbs a,.ph-btn,.ph-back{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">App header with actions</span>
<header class="ph d-flex flex-wrap align-items-end justify-content-between column-gap-4 row-gap-3">
  <div>
    <nav aria-label="Breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Workspace</a></li>
        <li class="breadcrumb-item"><a href="#">Billing</a></li>
        <li class="breadcrumb-item active" aria-current="page">Invoices</li>
      </ol>
    </nav>
    <h1 class="mb-0">Invoices</h1>
    <p class="ph-sub mt-1 mb-0">42 open · $18,240 outstanding</p>
  </div>
  <div class="d-flex flex-wrap gap-2">
    <a class="btn" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Export CSV</a>
    <a class="btn btn-primary" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14"/></svg>New invoice</a>
  </div>
</header></div>

<div><span class="lbl">Article hero band</span>
<header class="ph ph-hero">
  <nav aria-label="Breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Docs</a></li>
      <li class="breadcrumb-item"><a href="#">Integrations</a></li>
      <li class="breadcrumb-item active" aria-current="page">Webhooks</li>
    </ol>
  </nav>
  <h1 class="mb-0">Configuring webhooks</h1>
  <p class="ph-sub mt-1 mb-0">Updated 12 September 2026 · 6 min read</p>
</header></div>

<div><span class="lbl">Detail header with back button</span>
<header class="ph ph-detail d-flex flex-wrap align-items-center justify-content-between column-gap-4 row-gap-3">
  <div class="d-flex align-items-center gap-3">
    <a class="ph-back" href="#" aria-label="Back to Orders"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 12H5M11 6l-6 6 6 6"/></svg></a>
    <div>
      <nav aria-label="Breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Store</a></li>
          <li class="breadcrumb-item"><a href="#">Orders</a></li>
          <li class="breadcrumb-item active" aria-current="page">#10482</li>
        </ol>
      </nav>
      <h1 class="d-flex flex-wrap align-items-center gap-2 mb-0">Order #10482 <span class="badge rounded-pill">Paid</span></h1>
    </div>
  </div>
  <div class="d-flex flex-wrap gap-2">
    <a class="btn" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 9V3h10v6M7 17H4v-7h16v7h-3M7 14h10v7H7z"/></svg>Print</a>
    <a class="btn" href="#">Issue refund</a>
  </div>
</header></div>
CSS 
/* Page headers built from Bootstrap utilities, .breadcrumb, .btn and .badge. The breadcrumb divider is
   --bs-breadcrumb-divider (inline SVG) with empty alt text where supported, so it is not read aloud. */
.ph{--ph-accent:#6d28d9;--ph-accent-dark:#5b21b6;--ph-link:#64748b;--ph-muted:#526077;
  --bs-breadcrumb-divider:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>");
  padding:22px 26px;background:#fff;border:1px solid #e2e7f0;border-radius:16px;color:#0f172a}
.ph .breadcrumb{--bs-breadcrumb-margin-bottom:.55rem;--bs-breadcrumb-font-size:.8125rem;--bs-breadcrumb-item-padding-x:.4rem;
  --bs-breadcrumb-item-active-color:#334155;align-items:center;row-gap:.2rem;line-height:1.5}
.ph .breadcrumb-item{display:flex;align-items:center}
.ph .breadcrumb-item+.breadcrumb-item::before{display:block;line-height:0}
@supports (content:"x" / ""){.ph .breadcrumb-item+.breadcrumb-item::before{content:var(--bs-breadcrumb-divider,"/") / ""}}
.ph .breadcrumb-item.active{font-weight:500}
.ph .breadcrumb a{color:var(--ph-link);text-decoration:none;border-radius:4px;transition:color .15s}
.ph .breadcrumb a:hover{color:var(--ph-accent);text-decoration:underline;text-underline-offset:3px}
.ph h1{font-size:1.6rem;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.ph-sub{color:var(--ph-muted);font-size:.9rem}
.ph .btn{--bs-btn-padding-x:1rem;--bs-btn-padding-y:.55rem;--bs-btn-font-size:.875rem;--bs-btn-font-weight:600;--bs-btn-line-height:1.25;
  --bs-btn-border-radius:10px;--bs-btn-color:#334155;--bs-btn-bg:#fff;--bs-btn-border-color:#cbd5e1;
  --bs-btn-hover-color:#334155;--bs-btn-hover-bg:#f8fafc;--bs-btn-hover-border-color:#94a3b8;
  --bs-btn-active-color:#334155;--bs-btn-active-bg:#f1f5f9;--bs-btn-active-border-color:#94a3b8;
  display:inline-flex;align-items:center;gap:.45rem}
.ph .btn-primary{--bs-btn-color:#fff;--bs-btn-bg:var(--ph-accent);--bs-btn-border-color:var(--ph-accent);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--ph-accent-dark);--bs-btn-hover-border-color:var(--ph-accent-dark);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:#4c1d95;--bs-btn-active-border-color:#4c1d95;box-shadow:0 4px 12px -4px rgba(109,40,217,.5)}
.ph .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ph a:focus-visible,.ph .btn:focus-visible{outline:2px solid var(--ph-accent);outline-offset:2px;box-shadow:none}
/* hero band */
.ph-hero{--bs-breadcrumb-divider:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none' stroke='%238b5cf6' stroke-width='1.6' stroke-linecap='round'><path d='M10.5 2 5.5 14'/></svg>");padding:34px 30px;border:0;
  background:linear-gradient(135deg,#f5f3ff 0%,#ede9fe 55%,#e0e7ff 100%)}
.ph-hero .breadcrumb{--bs-breadcrumb-item-active-color:#3b0764}
.ph-hero .breadcrumb a{color:var(--ph-accent-dark);font-weight:500}
.ph-hero .breadcrumb a:hover{color:#4c1d95}
.ph-hero h1{font-size:2rem;margin-top:.15rem}
.ph-hero .ph-sub{color:#4c4a63}
/* detail header */
.ph-back{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #cbd5e1;border-radius:12px;color:#334155;transition:background-color .15s}
.ph-back:hover{background:#f5f3ff;color:var(--ph-accent)}
.ph-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ph-detail .breadcrumb{--bs-breadcrumb-margin-bottom:.2rem}
.ph-detail h1{font-size:1.35rem}
.ph .badge{--bs-badge-padding-x:.6rem;--bs-badge-padding-y:.2rem;--bs-badge-font-size:.75rem;--bs-badge-font-weight:600;
  --bs-badge-color:#166534;background:#dcfce7;line-height:1.5;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.ph .breadcrumb a,.ph .btn,.ph-back{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">App header with actions</span>
<header class="flex flex-wrap items-end justify-between gap-x-6 gap-y-[18px] rounded-2xl border border-[#e2e7f0] bg-white px-[26px] py-[22px] text-slate-900">
  <div class="min-w-0">
    <nav aria-label="Breadcrumb">
      <ol class="mb-[.55rem] flex flex-wrap items-center gap-x-[.4rem] gap-y-[.2rem] text-[.8125rem] leading-normal *:inline-flex *:items-center *:gap-[.4rem] [&>li+li]:before:size-[13px] [&>li+li]:before:flex-none [&>li+li]:before:bg-slate-400 [&>li+li]:before:sep-chevron">
      <li><a href="#" class="rounded text-[#64748b] no-underline transition-[color,background-color,border-color] hover:text-[#6d28d9] hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6d28d9] motion-reduce:transition-none">Workspace</a></li>
      <li><a href="#" class="rounded text-[#64748b] no-underline transition-[color,background-color,border-color] hover:text-[#6d28d9] hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6d28d9] motion-reduce:transition-none">Billing</a></li>
      <li aria-current="page" class="font-medium text-[#334155]">Invoices</li>
      </ol>
    </nav>
    <h1 class="text-[1.6rem] leading-[1.2] font-bold tracking-[-.02em]">Invoices</h1>
    <p class="mt-[.35rem] text-[.9rem] text-[#526077]">42 open · $18,240 outstanding</p>
  </div>
  <div class="flex flex-wrap gap-2.5">
    <a href="#" class="inline-flex items-center gap-[.45rem] rounded-[10px] border border-[#cbd5e1] bg-white px-4 py-[.55rem] text-sm leading-[1.25] font-semibold text-[#334155] no-underline transition-[color,background-color,border-color] hover:border-[#94a3b8] hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6d28d9] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-4 fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>Export CSV</a>
    <a href="#" class="inline-flex items-center gap-[.45rem] rounded-[10px] border border-[#6d28d9] bg-[#6d28d9] px-4 py-[.55rem] text-sm leading-[1.25] font-semibold text-white no-underline shadow-[0_4px_12px_-4px_rgba(109,40,217,.5)] transition-[color,background-color,border-color] hover:border-[#5b21b6] hover:bg-[#5b21b6] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6d28d9] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-4 fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]"><path d="M12 5v14M5 12h14"/></svg>New invoice</a>
  </div>
</header></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Article hero band</span>
<header class="rounded-2xl bg-linear-135 from-[#f5f3ff] via-[#ede9fe] via-55% to-[#e0e7ff] px-[30px] py-[34px] text-slate-900">
  <nav aria-label="Breadcrumb">
    <ol class="mb-[.55rem] flex flex-wrap items-center gap-x-[.4rem] gap-y-[.2rem] text-[.8125rem] leading-normal *:inline-flex *:items-center *:gap-[.4rem] [&>li+li]:before:size-[13px] [&>li+li]:before:flex-none [&>li+li]:before:bg-[#8b5cf6] [&>li+li]:before:sep-slash">
    <li><a href="#" class="rounded font-medium text-[#5b21b6] no-underline transition-[color,background-color,border-color] hover:text-[#4c1d95] hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6d28d9] motion-reduce:transition-none">Docs</a></li>
    <li><a href="#" class="rounded font-medium text-[#5b21b6] no-underline transition-[color,background-color,border-color] hover:text-[#4c1d95] hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6d28d9] motion-reduce:transition-none">Integrations</a></li>
    <li aria-current="page" class="font-medium text-[#3b0764]">Webhooks</li>
    </ol>
  </nav>
  <h1 class="mt-[.15rem] text-[2rem] leading-[1.2] font-bold tracking-[-.02em]">Configuring webhooks</h1>
  <p class="mt-[.35rem] text-[.9rem] text-[#4c4a63]">Updated 12 September 2026 · 6 min read</p>
</header></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Detail header with back button</span>
<header class="flex flex-wrap items-center justify-between gap-x-6 gap-y-[18px] rounded-2xl border border-[#e2e7f0] bg-white px-[26px] py-[22px] text-slate-900">
  <div class="flex min-w-0 items-center gap-4">
    <a href="#" aria-label="Back to Orders" class="grid size-[42px] flex-none place-items-center rounded-xl border border-[#cbd5e1] text-[#334155] transition-[color,background-color,border-color] hover:bg-[#f5f3ff] hover:text-[#6d28d9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6d28d9] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-[18px] fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]"><path d="M19 12H5M11 6l-6 6 6 6"/></svg></a>
    <div>
      <nav aria-label="Breadcrumb">
        <ol class="mb-[.55rem] flex flex-wrap items-center gap-x-[.4rem] gap-y-[.2rem] text-[.8125rem] leading-normal *:inline-flex *:items-center *:gap-[.4rem] [&>li+li]:before:size-[13px] [&>li+li]:before:flex-none mb-[.2rem]! [&>li+li]:before:bg-slate-400 [&>li+li]:before:sep-chevron">
        <li><a href="#" class="rounded text-[#64748b] no-underline transition-[color,background-color,border-color] hover:text-[#6d28d9] hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6d28d9] motion-reduce:transition-none">Store</a></li>
        <li><a href="#" class="rounded text-[#64748b] no-underline transition-[color,background-color,border-color] hover:text-[#6d28d9] hover:underline hover:underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6d28d9] motion-reduce:transition-none">Orders</a></li>
        <li aria-current="page" class="font-medium text-[#334155]">#10482</li>
        </ol>
      </nav>
      <h1 class="flex flex-wrap items-center gap-2.5 text-[1.35rem] leading-[1.2] font-bold tracking-[-.02em]">Order #10482 <span class="rounded-full bg-[#dcfce7] px-[.6rem] py-[.2rem] text-xs font-semibold tracking-normal text-[#166534]">Paid</span></h1>
    </div>
  </div>
  <div class="flex flex-wrap gap-2.5">
    <a href="#" class="inline-flex items-center gap-[.45rem] rounded-[10px] border border-[#cbd5e1] bg-white px-4 py-[.55rem] text-sm leading-[1.25] font-semibold text-[#334155] no-underline transition-[color,background-color,border-color] hover:border-[#94a3b8] hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6d28d9] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-4 fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]"><path d="M7 9V3h10v6M7 17H4v-7h16v7h-3M7 14h10v7H7z"/></svg>Print</a>
    <a href="#" class="inline-flex items-center gap-[.45rem] rounded-[10px] border border-[#cbd5e1] bg-white px-4 py-[.55rem] text-sm leading-[1.25] font-semibold text-[#334155] no-underline transition-[color,background-color,border-color] hover:border-[#94a3b8] hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6d28d9] motion-reduce:transition-none">Issue refund</a>
  </div>
</header></div>
CSS 
/* Separator shapes for li + li::before, painted through a mask so nothing is read aloud. */
@utility sep-chevron { mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>") center / contain no-repeat; }
@utility sep-slash { mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'><path d='M10.5 2 5.5 14'/></svg>") center / contain no-repeat; }

About this set

Breadcrumbs as part of a complete page header, which is where most of them live. App header with actions puts a small breadcrumb above an Invoices heading and a summary line, with Export CSV and New invoice buttons aligned to the right that wrap below the title on phones. Article hero band sets a slash breadcrumb, a large title and an updated date on a soft violet gradient, for documentation and blog posts. Detail header with back button pairs a square back arrow with the breadcrumb, an order number heading and a Paid status badge, plus secondary actions, for record pages in admin panels. In each header the breadcrumb is a separate nav landmark above the h1, sized smaller and quieter than the title so the heading stays the first thing people read. The layout is flexbox with wrapping, so no media queries are needed. The Bootstrap version composes the headers from flex utilities, .breadcrumb, .btn with its –bs-btn variables and .badge, and the Tailwind version uses utilities only.

What’s included

  • App, article and record-detail header layouts
  • Breadcrumb above an h1 with summary text or metadata
  • Action buttons that wrap under the title on small screens
  • Back button with an accessible name beside the trail
  • Bootstrap .btn and .badge restyled through CSS variables

Accessibility

The breadcrumb is a nav labelled Breadcrumb inside a header element, with aria-current="page" on the last level, and the page title is a real h1. The icon-only back link has aria-label="Back to Orders", and all button icons are aria-hidden. Breadcrumb links, buttons and the back link show a 2px violet focus outline, and hover transitions are removed under prefers-reduced-motion.

Customise it

Change --ph-accent, --ph-link and --ph-muted on .ph, the gradient on .ph-hero and the badge colours on .ph-badge. In Bootstrap the buttons take --bs-btn-* variables; in Tailwind edit the bg-, border- and text- classes on the buttons.