v2.0Utility

Hero Product Mockup

Self-contained browser-dashboard mockup illustration for product hero sections. Prop-driven URL, brand, navigation, KPI tiles, funnel, and cohort displays. Originally built for the Threshold reference build; reusable as a generic hero mockup.

View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

Default

See this component used in context in the Threshold reference build.

app.northwind.io/activation

Activation

51.4%

+4.1

TTFV

3.8d

-0.6

Trial-to-paid

68%

+2.3

Activation funnel

Visited site

100%2,410

Signed up

62%1,494

Onboarded

44%1,060

First action

33%796

Activated

27%651

Recent cohorts

Q1 2026

51.4%

Q4 2025

47.2%

Q3 2025

43.6%

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
url	string	"app.example.com/activation"	Text shown in the browser URL bar
brandName	string	"northwind"	Brand name shown in the sidebar below the mark
navItems	NavItem[]	5 default items	Sidebar navigation items; each has a label and optional active flag
eyebrow	string	"Dashboard"	Page header eyebrow label rendered above the title
title	string	"Activation"	Page header title
badge	string	"Q1 2026"	Small badge beside the title, e.g. a date range
kpis	KPI[]	3 default KPIs	KPI tiles; exactly 3 recommended for the 3-column grid. Each has label, value, and delta
funnelLabel	string	"Activation funnel"	Label for the funnel section heading
funnelSteps	FunnelStep[]	5 default steps	Funnel bar chart steps; each has stage, value (0-100), and count
cohortsLabel	string	"Recent cohorts"	Label for the cohorts section heading
cohorts	CohortRow[]	3 default rows	Recent cohort rows; each has label, value (decimal rate), and trend ("up" \| "flat")
maxCohortValue	number	50	Denominator for cohort bar widths; the cohort with this value renders a 100% wide bar
ariaLabel	string	auto-generated	Accessible label for the root element (role="img")
className	string	undefined	Optional extra class name applied to the root element

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/hero-product-mockup/styles.css">

<div class="hpm" role="img" aria-label="Decorative product dashboard mockup">
  <!-- Browser chrome -->
  <div class="hpm__frame">
    <div class="hpm__chrome">
      <span class="hpm__dot"></span>
      <span class="hpm__dot"></span>
      <span class="hpm__dot"></span>
      <div class="hpm__url">app.northwind.io/activation</div>
    </div>

    <!-- App body -->
    <div class="hpm__body">
      <!-- Sidebar -->
      <aside class="hpm__sidebar">
        <div class="hpm__brand">northwind</div>
        <ul class="hpm__nav">
          <li class="hpm__nav-item hpm__nav-item--active">Activation</li>
          <li class="hpm__nav-item">Funnels</li>
          <li class="hpm__nav-item">Cohorts</li>
        </ul>
      </aside>

      <!-- Main panel -->
      <div class="hpm__main">
        <div class="hpm__header">
          <div class="hpm__header-left">
            <p class="hpm__eyebrow">Dashboard</p>
            <h3 class="hpm__page-title">Activation</h3>
          </div>
          <span class="hpm__badge">Q1 2026</span>
        </div>

        <!-- KPI tiles -->
        <div class="hpm__kpis">
          <div class="hpm__kpi">
            <p class="hpm__kpi-label">Activation</p>
            <p class="hpm__kpi-value">51.4%</p>
            <p class="hpm__kpi-delta">+4.1</p>
          </div>
          <!-- repeat for each KPI -->
        </div>

        <!-- Funnel -->
        <div class="hpm__section">
          <p class="hpm__section-label">Activation funnel</p>
          <div class="hpm__funnel">
            <div class="hpm__funnel-row">
              <span class="hpm__funnel-stage">Signed up</span>
              <div class="hpm__funnel-track">
                <div class="hpm__funnel-bar" style="width: 62%"></div>
              </div>
              <span class="hpm__funnel-value">62%</span>
              <span class="hpm__funnel-count">1,494</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Customization

Override these CSS custom properties to integrate the component into your brand.

.hpm {
  --hpm-serif-font: var(--brand-serif, Georgia, "Times New Roman", serif);
  --hpm-sans-font: var(--brand-sans, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
  --hpm-mono-font: var(--brand-mono, ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace);

  /* Surface and border */
  --hpm-surface: var(--brand-surface, #faf9f6);
  --hpm-surface-main: var(--brand-surface-main, #ffffff);
  --hpm-border: var(--brand-border, #edeff2);

  /* Ink scale */
  --hpm-ink: var(--brand-ink, #0f1b2d);
  --hpm-ink-secondary: var(--brand-ink-secondary, #1f2d44);
  --hpm-muted: var(--brand-muted, #4a5568);

  /* Accent */
  --hpm-accent: var(--brand-accent, #5b8b85);

  /* Value highlight (KPI numbers) */
  --hpm-value: var(--brand-value, #8e6e1a);

  /* Positive / trend-up color */
  --hpm-positive: var(--brand-positive, #3f6e55);

  /* Neutral dot color (browser chrome traffic lights) */
  --hpm-dot: var(--brand-dot, #c7ccd4);

  /* Frame shadow */
  --hpm-frame-shadow: 0 24px 48px -16px rgba(15, 27, 45, 0.18),
                      0 8px 16px -8px rgba(15, 27, 45, 0.08),
                      0 0 0 1px rgba(15, 27, 45, 0.06);

  /* Layout */
  --hpm-sidebar-width: 120px;
  --hpm-body-min-height: 440px;
}