Settings — Active sessions with security footer

A divided device-session list ends in a security action band. Use for reviewing current access and revoking old sessions.

ReactHTML

1440 × 900

Open in new tab

Component.tsx96 lines

export default function SettingsSessionList() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            Signed-in devices
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            Review the devices that currently have account access.
          </p>
        </div>
        <ul
          role="list"
          className="mt-8 divide-y divide-neutral-200 border-y border-neutral-200"
        >
          <li className="grid items-center gap-4 py-6 sm:grid-cols-[minmax(0,1fr)_auto]">
            <div>
              <div className="flex flex-wrap items-center gap-3">
                <h2 className="text-base font-semibold">Desktop browser</h2>
                <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
                  Current session
                </span>
              </div>
              <p className="mt-2 text-sm text-neutral-600">
                Browser and operating-system summary.
              </p>
              <p className="mt-1 text-sm text-neutral-500">Last active: Now</p>
            </div>
            <a
              href="#"
              aria-label="Review desktop browser session"
              className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              Review session
            </a>
          </li>
          <li className="grid items-center gap-4 py-6 sm:grid-cols-[minmax(0,1fr)_auto]">
            <div>
              <div className="flex flex-wrap items-center gap-3">
                <h2 className="text-base font-semibold">Mobile browser</h2>
              </div>
              <p className="mt-2 text-sm text-neutral-600">
                Device and operating-system summary.
              </p>
              <p className="mt-1 text-sm text-neutral-500">
                Last active: 2 hours ago
              </p>
            </div>
            <a
              href="#"
              aria-label="Revoke mobile browser session"
              className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              Revoke session
            </a>
          </li>
          <li className="grid items-center gap-4 py-6 sm:grid-cols-[minmax(0,1fr)_auto]">
            <div>
              <div className="flex flex-wrap items-center gap-3">
                <h2 className="text-base font-semibold">Tablet browser</h2>
              </div>
              <p className="mt-2 text-sm text-neutral-600">
                Device and operating-system summary.
              </p>
              <p className="mt-1 text-sm text-neutral-500">
                Last active: Mar 14
              </p>
            </div>
            <a
              href="#"
              aria-label="Revoke tablet browser session"
              className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              Revoke session
            </a>
          </li>
        </ul>
        <aside className="mt-8 flex flex-wrap items-center justify-between gap-6 rounded-lg bg-neutral-50 p-6">
          <div>
            <h2 className="text-base font-semibold">Account security</h2>
            <p className="mt-2 text-sm text-neutral-600">
              Short advice for an unrecognized session.
            </p>
          </div>
          <a
            href="#"
            className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            Review security settings
          </a>
        </aside>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use to review account sessions without a full audit table. Choose a data table for many sessions with filtering. Variations: add a location slot, show authentication method, or include an all-other-sessions action.
Hierarchy: The h1 leads into device names, current-session badge, environment notes and last-active timestamps. Each repeated action names its device. H1 up to 5 words, lede 14, device label 4, detail 10.
Responsive: Under 640px each session action sits below its device copy. The security band wraps at all widths. Badges wrap beside the heading; no row uses a fixed content width.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A divided list begins 32px below the introduction. Rows use 24px vertical padding, 16px gaps and minmax(0,1fr)/auto columns at sm. A p-6 wrapping security band follows after 32px.
States: Links and controls have a 2px neutral-900 keyboard-focus outline offset by 2px. Filled actions change to neutral-700 on hover, outlined actions to neutral-50, and underlined links to neutral-600. Native form fields retain browser validation; controls describe structure and need application integration for persistence or navigation.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Signed-in devices                                             │
│Desktop browser [Current session]         [Review session]    │
│Device summary  Last active: Now                              │
│Mobile browser                           [Revoke session]     │
│Device summary  Last active: 2 hours ago                      │
│Tablet browser                           [Revoke session]     │
│Device summary  Last active: Mar 14                           │
│Account security                         [Review security]    │
└──────────────────────────────────────────────────────────────┘

View all

Settings — Billing cards and invoices
Layout tags: asymmetric,numbers,table
Settings — Danger zone
Layout tags: stacked,list,form
Settings — Described rows
Layout tags: asymmetric,list,form

Settings — Active sessions with security footer

Pattern notes

More in Settings

Settings — Billing cards and invoices

Settings — Danger zone

Settings — Described rows