Dashboard — Main list with summary rail

A schedule list beside a fixed summary rail that moves above the list on mobile. Use it when current items need a concise total and supporting context.

ReactHTML

1440 × 900

Open in new tab

Component.tsx99 lines

export default function DashboardMainRail() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-7xl 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>
          <p className="text-sm text-neutral-500">Saturday, Oct 10, 2026</p>
        </header>
        <div className="mt-8 grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_320px]">
          <aside className="order-1 min-w-0 rounded-lg bg-neutral-50 p-6 lg:order-2">
            <h2 className="text-sm font-medium text-neutral-500">Summary label</h2>
            <p className="mt-3 text-5xl font-semibold tracking-tight">24</p>
            <p className="mt-2 text-sm text-neutral-600">Items planned for today</p>
            <dl className="mt-6 grid grid-cols-2 gap-4">
              <div>
                <dt className="text-xs text-neutral-500">Completed</dt>
                <dd className="mt-1 text-sm font-medium">18</dd>
              </div>
              <div>
                <dt className="text-xs text-neutral-500">Remaining</dt>
                <dd className="mt-1 text-sm font-medium">6</dd>
              </div>
              <div>
                <dt className="text-xs text-neutral-500">In review</dt>
                <dd className="mt-1 text-sm font-medium">4</dd>
              </div>
              <div>
                <dt className="text-xs text-neutral-500">Capacity</dt>
                <dd className="mt-1 text-sm font-medium">32</dd>
              </div>
            </dl>
            <details className="mt-6 border-t border-neutral-200 pt-4">
              <summary className="cursor-pointer text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">More context</summary>
              <p className="mt-3 text-sm text-pretty text-neutral-600">A short note explaining how the summary is calculated and which items need attention before the next scheduled step.</p>
            </details>
          </aside>
          <div className="order-2 min-w-0 lg:order-1">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <h2 className="text-base font-semibold">Schedule</h2>
              <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">Filter schedule</a>
            </div>
            <ol role="list" className="mt-5">
              <li className="grid grid-cols-[56px_minmax(0,1fr)] items-start gap-x-4 gap-y-2 border-t border-neutral-200 py-5 sm:grid-cols-[56px_minmax(0,1fr)_auto]">
                <time dateTime="2026-10-10T09:00:00Z" className="row-span-2 text-sm text-neutral-500 sm:row-span-1">09:00</time>
                <div>
                  <h3 className="text-base font-semibold">First scheduled item</h3>
                  <p className="mt-1 text-xs text-neutral-500">Short context for the item</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">Ready</span>
                </div>
              </li>
              <li className="grid grid-cols-[56px_minmax(0,1fr)] items-start gap-x-4 gap-y-2 border-t border-neutral-200 py-5 sm:grid-cols-[56px_minmax(0,1fr)_auto]">
                <time dateTime="2026-10-10T10:30:00Z" className="row-span-2 text-sm text-neutral-500 sm:row-span-1">10:30</time>
                <div>
                  <h3 className="text-base font-semibold">Next appointment title</h3>
                  <p className="mt-1 text-xs text-neutral-500">Supporting detail for this slot</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-[56px_minmax(0,1fr)] items-start gap-x-4 gap-y-2 border-t border-neutral-200 py-5 sm:grid-cols-[56px_minmax(0,1fr)_auto]">
                <time dateTime="2026-10-10T12:00:00Z" className="row-span-2 text-sm text-neutral-500 sm:row-span-1">12:00</time>
                <div>
                  <h3 className="text-base font-semibold">Midday entry name</h3>
                  <p className="mt-1 text-xs text-neutral-500">A note about the next step</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">Ready</span>
                </div>
              </li>
              <li className="grid grid-cols-[56px_minmax(0,1fr)] items-start gap-x-4 gap-y-2 border-t border-neutral-200 py-5 sm:grid-cols-[56px_minmax(0,1fr)_auto]">
                <time dateTime="2026-10-10T14:00:00Z" className="row-span-2 text-sm text-neutral-500 sm:row-span-1">14:00</time>
                <div>
                  <h3 className="text-base font-semibold">Review session title</h3>
                  <p className="mt-1 text-xs text-neutral-500">Context for the review</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>
              <li className="grid grid-cols-[56px_minmax(0,1fr)] items-start gap-x-4 gap-y-2 border-t border-neutral-200 py-5 sm:grid-cols-[56px_minmax(0,1fr)_auto]">
                <time dateTime="2026-10-10T16:30:00Z" className="row-span-2 text-sm text-neutral-500 sm:row-span-1">16:30</time>
                <div>
                  <h3 className="text-base font-semibold">Final scheduled item</h3>
                  <p className="mt-1 text-xs text-neutral-500">Closing detail for the day</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>
            </ol>
          </div>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a schedule supported by a total and compact context. Pick dashboard-split-panels when the summary should have equal width. Variations: show a queue instead of times, swap totals for capacity, or add a breakdown in the details note.
Hierarchy: The page heading is 30px semibold, 36px from 640px; panel titles are 16px semibold, body and labels 14px, and metadata 12px or 14px. Read the heading, summary total and schedule. The 48px figure anchors the rail; schedule titles are 16px semibold, timestamps 14px, row metadata 12px and rail facts 14px. Keep page title to 5 words, row titles to 4, metadata to 6, summary label to 4 and context note to 35. Status is an outlined badge with explicit wording.
Responsive: The summary rail precedes the list in DOM order. Below 1024px the full-width rail appears before the list. From 1024px it follows the main list visually in a 320px right column. Below 640px each badge moves under its title in column 2 while the time spans both lines; from 640px it aligns in a third column.
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-7xl (1280px) container has a wrapping header and divider. Content starts 32px below with a 32px gap; at 1024px the grid is minmax(0,1fr) 320px. An underlined Filter schedule link sits beside the Schedule heading in a wrapping row with a 12px gap. The main list has five divided schedule rows with 56px time columns, flexible titles and badges. A neutral-50 rounded-lg rail uses p-6, a 48px key figure, a two-column four-fact dl with 16px gaps and a bordered details note.
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. Filter schedule is an underlined action link that turns neutral-600 on hover and shows the standard keyboard-focus outline; no filter panel is shown. More context is closed initially and toggles a 14px note with native details. Its summary shows the standard focus outline. List statuses and facts remain static; no selected or disabled state.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│ Overview title                              Date range   │
├──────────────────────────────────┬───────────────────────┤
│ Schedule [Filter schedule]       │ Summary label         │
│                                  │ Key figure            │
│ 09:00 Item / metadata [Ready]    │ Fact       Fact       │
│ 10:30 Item / metadata [Pending]  │ Fact       Fact       │
│ 12:00 Item / metadata [Ready]    │ [More context v]      │
│ 14:00 Item / metadata [Review]   │ Context when open     │
│ 16:30 Item / metadata [Pending]  │                       │
└──────────────────────────────────┴───────────────────────┘

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 — Main list with summary rail

Pattern notes

More in Dashboard

Dashboard — Activity feed

Dashboard — App shell with sidebar

Dashboard — Bento overview