Workspace Overview - Everyday Interface Patterns

A static workspace overview card shows Northstar Studio, Northstar Launch, 3 members, and 5 open tasks without analytics or workspace services.

Program

Workspace home cards should summarize pinned workspace state without pretending to run a dashboard or analytics query.

workspace_overview_card.html

Visuals: captured from real browser rendering

<section class="workspace-card" aria-labelledby="workspace-title">
  <h2 id="workspace-title">Northstar Studio</h2>
  <dl>
    <div><dt>Project</dt><dd>Northstar Launch</dd></div>
    <div><dt>Members</dt><dd>3 members</dd></div>
    <div><dt>Tasks</dt><dd>5 open tasks</dd></div>
  </dl>
  <p class="note">Static workspace overview only; no analytics dashboard, workspace service, task API, or storage runs.</p>
</section>
<style>
  .workspace-card { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .workspace-card dl { display: grid; gap: 8px; margin: 0; }
  .workspace-card dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 8px; }
  .workspace-card dt { color: #475569; }
  .workspace-card dd, .note { margin: 0; }
  .note { color: #475569; }
</style>

Label the workspace overview card.
The section is labelled by the visible workspace heading.
Show the pinned workspace name.
The workspace name is fixed display data.
Show the pinned project row.
The project name is fixed display data.
Show the member count.
The member count is pinned display text.
Show the open task count.
The task count is pinned display text.
Check overview honesty.
Workspace facts and no dashboard backend.

workspace heading Northstar Studio is the pinned workspace name.

overview facts Project, members, and open tasks are exact display data.

no dashboard backend The lesson should not imply analytics, workspace services, task APIs, or storage.