Task Detail Patterns

Assignee Row

A static assignee row shows initials MC, assignee Maya Chen, and Open task status without lookup, upload, routing, or avatar network.

Program

Assignee rows should show who owns the task and how the status reads without looking up people or loading avatar images.

assignee_status_row.html
Visuals: captured from real browser rendering
<section class="assignee-card" aria-labelledby="assignee-title">
  <h2 id="assignee-title">Assignee</h2>
  <div class="assignee-row">
    <span class="avatar" role="img" aria-label="Maya Chen initials MC">MC</span>
    <p><strong>Maya Chen</strong><br><span>Task status: Open</span></p>
  </div>
  <p class="note">Static assignee row only; no assignee lookup, avatar upload, network image, routing, save, or task API runs.</p>
</section>
<style>
  .assignee-card { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .assignee-row { display: flex; align-items: center; gap: 10px; }
  .avatar { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 999px; background: #dbeafe; color: #1e3a8a; font-weight: 700; }
  .assignee-card p, .note { margin: 0; }
  .note { color: #475569; }
</style>

  1. Label the assignee card.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Expose the initials avatar.

    The avatar has role img and a clear label.
    The avatar has role img and a clear label.

  3. Show the pinned initials.

    The initials are fixed display text.
    The initials are fixed display text.

  4. Show the assignee name.

    The assignee name is pinned display data.
    The assignee name is pinned display data.

  5. Show the task status readback.

    The row reads the assigned task status plainly.
    The row reads the assigned task status plainly.

  6. Check assignee honesty.

    Initials, assignee, status readback, and no lookup service.
    Initials, assignee, status readback, and no lookup service.
initials avatar MC is a static initials avatar for Maya Chen.
assignee readback The row pairs the assignee name with task status.
no lookup The lesson should not imply assignee lookup, uploads, network images, routing, saves, or task APIs.