<div style="display:grid;gap:16px;max-width:520px">
<p style="display:flex;flex-wrap:wrap;gap:20px;margin:0">
<.status_indicator tone="good">Operational</.status_indicator>
<.status_indicator tone="warning">Degraded</.status_indicator>
<.status_indicator tone="critical" pulse>Outage</.status_indicator>
<.status_indicator tone="info">Deploying</.status_indicator>
<.status_indicator>Paused</.status_indicator>
</p>
<ul class="ui-status-list">
<li><span>API</span><.status_indicator tone="good">Operational</.status_indicator></li>
<li><span>Webhooks</span><.status_indicator tone="warning">Delayed by about 4 minutes</.status_indicator></li>
<li><span>Email delivery</span><.status_indicator tone="critical" pulse>Outage, investigating</.status_indicator></li>
</ul>
</div>