# Context markers

A context marker is a short vertical interface-accent line placed immediately before a card or section title. It distinguishes content whose meaning depends on the current person, role, or preview context without turning the entire panel into an accent surface.

## Appropriate use

Use a context marker for a deliberately exceptional context such as:

- a personal workspace or content associated with the signed-in person;
- an administrator preview of what another audience will see;
- a role-specific summary that appears alongside otherwise general content.

Usually, no more than one marked context should appear within a page section. A pattern does not need to appear repeatedly on the same page to be valid.

## Anatomy

1. Keep the card on `--surface-panel`; the marker supplies enough distinction without a tinted card background.
2. Place a straight 2px-wide, approximately 20px-high line immediately before the title.
3. Use `--interface-accent-text` for the marker and an 8px gap between the marker and title.
4. Keep the title in `--text-strong`. The marker is decorative and must use `aria-hidden="true"` when represented by an element.
5. Keep supporting copy and actions in their normal positions below the title row.

```html
<section class="context-card">
  <div class="context-card-title">
    <span class="context-marker" aria-hidden="true"></span>
    <h2>My workspace</h2>
  </div>
  <p>Tasks and records associated with you.</p>
</section>
```

The marker belongs to the title row. Do not attach it to the outer card edge, extend it through the card body, or make it follow a rounded corner.

## Restraint

Do not use a context marker:

- on every card in a grid or every section on a page;
- on ordinary settings, registry, detail, or program-area cards;
- to communicate selected navigation, success, warning, danger, or workflow status;
- beside a leading title icon when both would compete for attention;
- on a page title or eyebrow that already establishes the same context.

Navigation selection uses the separate navigation-state tokens and anatomy. Status and alerts use their semantic status treatments. If the marker does not communicate a meaningful audience or ownership distinction, omit it.

## Responsive and accessibility behavior

The title and marker remain one row at every viewport width. Allow a long title to wrap while keeping the marker aligned to the first line. The line is never the only source of meaning: the title and nearby description must explain the context in text.