Dashboard — Two panels, trend and list

Two equal panels pair a headline trend with a four-row operational list. Use it when the trend and current items deserve equal emphasis.

ReactHTML

1440 × 900

Open in new tab

Component.tsx107 lines

export default function DashboardSplitPanels() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <header className="flex flex-wrap items-center justify-between gap-4 border-b border-neutral-200 pb-6">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Overview title</h1>
          <div className="flex flex-wrap items-center gap-3">
            <p className="text-sm text-neutral-500">Oct 4–10, 2026</p>
            <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Updated</span>
          </div>
        </header>
        <div className="mt-6 grid gap-6 lg:grid-cols-2">
          <div className="min-w-0 rounded-lg border border-neutral-200 bg-white p-6">
            <h2 className="text-base font-semibold">Weekly activity</h2>
            <p className="mt-4 text-sm text-neutral-500">Headline metric</p>
            <p className="mt-2 text-3xl font-semibold tracking-tight">1,284 <span className="text-sm font-normal text-neutral-500">items</span></p>
            <svg aria-hidden="true" viewBox="0 0 240 128" fill="none" stroke="currentColor" strokeWidth="1.5" preserveAspectRatio="none" className="mt-6 h-32 w-full">
              <path d="M4 16h232M4 48h232M4 80h232M4 112h232" className="text-neutral-200" />
              <rect x="8" y="78" width="26" height="42" rx="2" fill="currentColor" stroke="none" className="text-neutral-300" />
              <rect x="40" y="46" width="26" height="74" rx="2" fill="currentColor" stroke="none" className="text-neutral-300" />
              <rect x="72" y="60" width="26" height="60" rx="2" fill="currentColor" stroke="none" className="text-neutral-300" />
              <rect x="104" y="29" width="26" height="91" rx="2" fill="currentColor" stroke="none" className="text-neutral-300" />
              <rect x="136" y="42" width="26" height="78" rx="2" fill="currentColor" stroke="none" className="text-neutral-300" />
              <rect x="168" y="15" width="26" height="105" rx="2" fill="currentColor" stroke="none" className="text-neutral-300" />
              <rect x="200" y="24" width="26" height="96" rx="2" fill="currentColor" stroke="none" className="text-neutral-500" />
            </svg>
            <p className="sr-only">Seven illustrative daily bars. Total weekly activity: 1,284 items.</p>
            <div className="mt-3 grid grid-cols-7 text-center text-xs text-neutral-500">
              <span>Sun</span>
              <span>Mon</span>
              <span>Tue</span>
              <span>Wed</span>
              <span>Thu</span>
              <span>Fri</span>
              <span>Sat</span>
            </div>
          </div>
          <div className="min-w-0 rounded-lg border border-neutral-200 bg-white p-6">
            <h2 className="text-base font-semibold">Current items</h2>
            <ul role="list" className="mt-6">
              <li className="grid grid-cols-[40px_minmax(0,1fr)] items-center gap-x-3 gap-y-2 border-t border-neutral-200 py-4 sm:grid-cols-[40px_minmax(0,1fr)_auto]">
                <span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-900 row-span-2 sm:row-span-1">
                  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
                    <path d="M5 4h14v16H5V4M9 8h6M9 12h6" />
                  </svg>
                </span>
                <div>
                  <p className="text-sm font-medium">Priority item</p>
                  <p className="mt-1 text-xs text-neutral-500">Supporting item detail</p>
                </div>
                <div className="col-start-2 sm:col-start-auto">
                  <span className="text-sm font-medium tabular-nums">128</span>
                </div>
              </li>
              <li className="grid grid-cols-[40px_minmax(0,1fr)] items-center gap-x-3 gap-y-2 border-t border-neutral-200 py-4 sm:grid-cols-[40px_minmax(0,1fr)_auto]">
                <span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-900 row-span-2 sm:row-span-1">
                  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
                    <path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M12 7v5l3 2" />
                  </svg>
                </span>
                <div>
                  <p className="text-sm font-medium">Pending entry</p>
                  <p className="mt-1 text-xs text-neutral-500">Context for this entry</p>
                </div>
                <div className="col-start-2 sm:col-start-auto">
                  <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Pending</span>
                </div>
              </li>
              <li className="grid grid-cols-[40px_minmax(0,1fr)] items-center gap-x-3 gap-y-2 border-t border-neutral-200 py-4 sm:grid-cols-[40px_minmax(0,1fr)_auto]">
                <span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-900 row-span-2 sm:row-span-1">
                  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
                    <path d="m5 12 4 4L19 6" />
                  </svg>
                </span>
                <div>
                  <p className="text-sm font-medium">Completed group</p>
                  <p className="mt-1 text-xs text-neutral-500">Summary of the group</p>
                </div>
                <div className="col-start-2 sm:col-start-auto">
                  <span className="text-sm font-medium tabular-nums">96</span>
                </div>
              </li>
              <li className="grid grid-cols-[40px_minmax(0,1fr)] items-center gap-x-3 gap-y-2 border-t border-neutral-200 py-4 sm:grid-cols-[40px_minmax(0,1fr)_auto]">
                <span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-900 row-span-2 sm:row-span-1">
                  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
                    <path d="M3 12s3-7 9-7 9 7 9 7-3 7-9 7-9-7-9-7M12 9v6" />
                  </svg>
                </span>
                <div>
                  <p className="text-sm font-medium">Review task</p>
                  <p className="mt-1 text-xs text-neutral-500">Next review detail</p>
                </div>
                <div className="col-start-2 sm:col-start-auto">
                  <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">In review</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <footer className="mt-6 flex flex-wrap items-center justify-between gap-3 border-t border-neutral-200 pt-4">
          <p className="text-sm text-neutral-500">Summary for the selected period</p>
          <a href="#" className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">View report</a>
        </footer>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when one trend and a short list have equal importance. Pick dashboard-kpi-chart-list for four KPIs and a wider chart. Variations: show balance versus transactions, workload versus queue, or completion versus milestones.
Hierarchy: The page heading is 30px semibold, 36px from 640px; panel titles are 16px semibold, body and labels 14px, and metadata 12px or 14px. The headline figure is 30px, list names 14px medium, metadata 12px and trailing values 14px or outlined status badges. Title up to 5 words; metric label up to 3; row title up to 4 and meta up to 5. Day labels name all seven bars. Status badges use explicit wording and outlines.
Responsive: Panels stack below 1024px and become equal columns from 1024px. Below 640px row values move below the item text while the 40px icon spans both lines; from 640px values align right. Header and footer wrap, preserving the section at 320px without page scrolling.
Layout: A white section with a centred container, 24px side padding (px-6), 64px vertical padding (py-16), and 96px from 640px (sm:py-24). A max-w-6xl (1152px) container has a wrapping header and bottom divider. Panels start 24px below, each with p-6, rounded-lg and a neutral-200 border. At 1024px they are equal columns with a 24px gap. The left has a label, 30px figure, 128px-tall seven-bar SVG and day-label row. Right has four icon-led rows with 16px vertical spacing and dividers. A divided footer strip follows by 24px.
States: All links and buttons show a 2px neutral-900 focus-visible outline offset 2px. Primary actions hover to neutral-700, secondary actions to neutral-50, and underlined links to neutral-600. Transitions use the default 150ms timing. Updated and row status badges are static. There are no selected, disabled or expanded controls. The footer report link is the only action.

Desktop wireframe

┌────────────────────────────────────────────────────────┐
│Overview title             Date range       [Updated]   │
│──────────────────────────────────────────────────────  │
│┌──────────────────────────┬─────────────────────────┐  │
││ Metric label             │ List heading            │  │
││ Headline figure          │ Icon  Item / meta Value │  │
││                          │ Icon  Item / meta Badge │  │
││ Seven-bar trend          │ Icon  Item / meta Value │  │
││ Day labels               │ Icon  Item / meta Badge │  │
│└──────────────────────────┴─────────────────────────┘  │
│Footer meta                                [View report]│
└────────────────────────────────────────────────────────┘

View all

Dashboard — Activity feed
Layout tags: stacked,list,compact
Dashboard — App shell with sidebar
Layout tags: sidebar,grid,numbers
Dashboard — Bento overview
Layout tags: bento,numbers,media

Dashboard — Two panels, trend and list

Pattern notes

More in Dashboard

Dashboard — Activity feed

Dashboard — App shell with sidebar

Dashboard — Bento overview