Active Device - Everyday Interface Patterns

A static active-device card shows Chrome on Windows, Chicago IL, 10:20 AM, and Current session status.

Program

Active-device summaries should make the device, location, last activity, and current-session status readable without checking a live session.

active_device_summary.html

Visuals: captured from real browser rendering

<section class="active-device" aria-labelledby="active-device-title"><h2 id="active-device-title">Active device summary</h2><dl>
  <div><dt>Device</dt><dd>Chrome on Windows</dd></div>
  <div><dt>Location</dt><dd>Chicago, IL</dd></div>
  <div><dt>Last active</dt><dd>10:20 AM</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Current session</span></dd></div></dl>
  <p class="note">Static active-device summary only; no auth service, device lookup, session store, geolocation, storage, route, API, network, script, form submit, or live session check runs.</p></section>
<style>
  .active-device { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .active-device dl { display: grid; gap: 8px; margin: 0; }
  .active-device dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .active-device dt { color: #475569; }
  .active-device dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dcfce7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the active-device card.
The section is labelled by its visible heading.
Show the device row.
The device is exact pinned data.
Show the location row.
The location is exact pinned data.
Show last activity.
The last-active time is exact pinned data.
Render the current status.
The status badge says this is the current session.
Check device honesty.
Device, location, last activity, status, and no live session check.

static markup The section heading names the active-device summary surface.

device rows Device, Location, Last active, and Status values are exact pinned data.

no live session check The lesson should not imply auth services, device lookup, session stores, geolocation, storage, routes, APIs, networks, scripts, form submits, or live session checks.