Components · signature

Status panel

A result / status / scoring panel: a solid colored head whose background switches with the semantic status, an optional key (legend) strip, metric rows, and a note footer. This is the system's hero component — de-domained from the original signature card.

Full panel

Head (kicker / title / subtitle) + a 4-step __key legend with .is-on highlighting the active step + .ds-metric rows + a __note footer.

Success — full delegation
Approval level
Full delegation
Approve without arbitration
Full Manager Director Blocked
Margin38.0 %
Margin / day€342
Day rate€900
Salary cost€420
Thresholds: ≥ 35 % full · 20–35 % manager · 0–20 % director · < 0 % blocked.
<div class="ds-status ds-status--success">
  <div class="ds-status__head">
    <div class="ds-status__kicker">Approval level</div>
    <div class="ds-status__title">Full delegation</div>
    <div class="ds-status__subtitle">Approve without arbitration</div>
  </div>
  <div class="ds-status__key">
    <span class="is-success is-on">Full</span>
    <span class="is-warning">Manager</span>
    <span class="is-danger">Director</span>
    <span class="is-critical">Blocked</span>
  </div>
  <div class="ds-status__body">
    <div class="ds-metric ds-metric--hero"><span class="ds-metric__k">Margin</span><span class="ds-metric__v is-pos">38.0 %</span></div>
    <div class="ds-metric"><span class="ds-metric__k">Margin / day</span><span class="ds-metric__v">€342</span></div>
  </div>
  <div class="ds-status__note">Thresholds: ≥ 35 % full · …</div>
</div>

Head variants

The head background follows the status modifier: --success, --warning, --danger, --critical, --neutral, --info. Text stays white (--ds-on-status).

All statuses
Status
Success
Status
Warning
Status
Danger
Status
Critical
Status
Neutral
Status
Info
<div class="ds-status ds-status--warning">
  <div class="ds-status__head">
    <div class="ds-status__kicker">Status</div>
    <div class="ds-status__title">Warning</div>
  </div>
</div>
<!-- swap --warning for --success / --danger / --critical / --neutral / --info -->

Web Component

The <ds-status> element builds the head from attributes and keeps the body in light DOM. See the Web Components page.

<ds-status> 
<ds-status status="warning" kicker="Approval level" heading="Manager review" subtitle="Needs sign-off">
  <div class="ds-status__body">
    <div class="ds-metric ds-metric--hero"><span class="ds-metric__k">Margin</span><span class="ds-metric__v">28 %</span></div>
  </div>
</ds-status>