@use 'sprucecss/scss/spruce' as *;
.status-block {
padding-block: spacer-clamp('xl', 'xxl');
&__inner {
display: flex;
flex-direction: column;
gap: spacer('l');
margin-inline: auto;
max-inline-size: 60rem;
> * {
margin: 0 !important;
}
}
&__subscribe {
align-items: center;
background-color: color('surface-muted');
border-radius: radius('lg');
display: grid;
gap: spacer('s');
padding: spacer('m');
@include breakpoint('md') {
grid-template-columns: minmax(0, 1fr) 16rem auto;
}
}
&__subscribe-text {
@include layout-stack('xxs');
p {
color: color('muted');
font-size: config('font-size-sm', $typography);
}
}
&__subscribe-title {
font-size: font-size('h5');
}
}
<section class="status-block" aria-labelledby="status-block-title">
<div class="container">
<div class="status-block__inner">
<header class="block-heading">
<p class="block-heading__eyebrow">Status</p>
<h2 class="block-heading__title" id="status-block-title">Current system status</h2>
<p class="block-heading__text">Live availability of every service, updated every minute.</p>
</header>
<section class="status-monitor" aria-labelledby="status-monitor-title">
<header class="status-monitor__header">
<h3 class="status-monitor__title" id="status-monitor-title">System status</h3>
<p class="status-monitor__overall status-monitor__overall--degraded" role="status">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
Checkout API is slower than usual. We’re investigating.
</p>
</header>
<ul class="status-monitor__services" role="list">
<li class="status-monitor__service">
<div class="status-monitor__row">
<h4 class="status-monitor__name" id="status-storefront">Storefront</h4>
<span class="status-monitor__status status-monitor__status--operational">Operational</span>
</div>
<ol class="status-monitor__bars" role="list" aria-hidden="true">
<li data-status="operational" title="Sep 5: No downtime"></li>
<li data-status="operational" title="Sep 6: No downtime"></li>
<li data-status="operational" title="Sep 7: No downtime"></li>
<li data-status="operational" title="Sep 8: No downtime"></li>
<li data-status="operational" title="Sep 9: No downtime"></li>
<li data-status="operational" title="Sep 10: No downtime"></li>
<li data-status="operational" title="Sep 11: No downtime"></li>
<li data-status="operational" title="Sep 12: No downtime"></li>
<li data-status="operational" title="Sep 13: No downtime"></li>
<li data-status="operational" title="Sep 14: No downtime"></li>
<li data-status="operational" title="Sep 15: No downtime"></li>
<li data-status="operational" title="Sep 16: No downtime"></li>
<li data-status="operational" title="Sep 17: No downtime"></li>
<li data-status="operational" title="Sep 18: No downtime"></li>
<li data-status="operational" title="Sep 19: No downtime"></li>
<li data-status="operational" title="Sep 20: No downtime"></li>
<li data-status="operational" title="Sep 21: No downtime"></li>
<li data-status="operational" title="Sep 22: No downtime"></li>
<li data-status="operational" title="Sep 23: No downtime"></li>
<li data-status="operational" title="Sep 24: No downtime"></li>
<li data-status="operational" title="Sep 25: No downtime"></li>
<li data-status="operational" title="Sep 26: No downtime"></li>
<li data-status="operational" title="Sep 27: No downtime"></li>
<li data-status="operational" title="Sep 28: No downtime"></li>
<li data-status="operational" title="Sep 29: No downtime"></li>
<li data-status="operational" title="Sep 30: No downtime"></li>
<li data-status="operational" title="Oct 1: No downtime"></li>
<li data-status="operational" title="Oct 2: No downtime"></li>
<li data-status="operational" title="Oct 3: No downtime"></li>
<li data-status="operational" title="Oct 4: No downtime"></li>
</ol>
<p class="status-monitor__summary"><span><span class="sr-only">Last 30 days: </span>100% uptime</span><span>No incidents</span></p>
</li>
<li class="status-monitor__service">
<div class="status-monitor__row">
<h4 class="status-monitor__name" id="status-checkout-api">Checkout API</h4>
<span class="status-monitor__status status-monitor__status--degraded">Degraded performance</span>
</div>
<ol class="status-monitor__bars" role="list" aria-hidden="true">
<li data-status="operational" title="Sep 5: No downtime"></li>
<li data-status="operational" title="Sep 6: No downtime"></li>
<li data-status="operational" title="Sep 7: No downtime"></li>
<li data-status="operational" title="Sep 8: No downtime"></li>
<li data-status="operational" title="Sep 9: No downtime"></li>
<li data-status="operational" title="Sep 10: No downtime"></li>
<li data-status="operational" title="Sep 11: No downtime"></li>
<li data-status="operational" title="Sep 12: No downtime"></li>
<li data-status="operational" title="Sep 13: No downtime"></li>
<li data-status="degraded" title="Sep 14: Degraded performance"></li>
<li data-status="operational" title="Sep 15: No downtime"></li>
<li data-status="operational" title="Sep 16: No downtime"></li>
<li data-status="operational" title="Sep 17: No downtime"></li>
<li data-status="operational" title="Sep 18: No downtime"></li>
<li data-status="operational" title="Sep 19: No downtime"></li>
<li data-status="operational" title="Sep 20: No downtime"></li>
<li data-status="operational" title="Sep 21: No downtime"></li>
<li data-status="operational" title="Sep 22: No downtime"></li>
<li data-status="operational" title="Sep 23: No downtime"></li>
<li data-status="operational" title="Sep 24: No downtime"></li>
<li data-status="operational" title="Sep 25: No downtime"></li>
<li data-status="operational" title="Sep 26: No downtime"></li>
<li data-status="operational" title="Sep 27: No downtime"></li>
<li data-status="operational" title="Sep 28: No downtime"></li>
<li data-status="operational" title="Sep 29: No downtime"></li>
<li data-status="operational" title="Sep 30: No downtime"></li>
<li data-status="operational" title="Oct 1: No downtime"></li>
<li data-status="operational" title="Oct 2: No downtime"></li>
<li data-status="operational" title="Oct 3: No downtime"></li>
<li data-status="degraded" title="Oct 4: Degraded performance"></li>
</ol>
<p class="status-monitor__summary"><span><span class="sr-only">Last 30 days: </span>99.82% uptime</span><span>2 incidents</span></p>
</li>
<li class="status-monitor__service">
<div class="status-monitor__row">
<h4 class="status-monitor__name" id="status-payments">Payments</h4>
<span class="status-monitor__status status-monitor__status--operational">Operational</span>
</div>
<ol class="status-monitor__bars" role="list" aria-hidden="true">
<li data-status="operational" title="Sep 5: No downtime"></li>
<li data-status="operational" title="Sep 6: No downtime"></li>
<li data-status="operational" title="Sep 7: No downtime"></li>
<li data-status="operational" title="Sep 8: No downtime"></li>
<li data-status="operational" title="Sep 9: No downtime"></li>
<li data-status="operational" title="Sep 10: No downtime"></li>
<li data-status="operational" title="Sep 11: No downtime"></li>
<li data-status="operational" title="Sep 12: No downtime"></li>
<li data-status="operational" title="Sep 13: No downtime"></li>
<li data-status="operational" title="Sep 14: No downtime"></li>
<li data-status="operational" title="Sep 15: No downtime"></li>
<li data-status="operational" title="Sep 16: No downtime"></li>
<li data-status="operational" title="Sep 17: No downtime"></li>
<li data-status="operational" title="Sep 18: No downtime"></li>
<li data-status="operational" title="Sep 19: No downtime"></li>
<li data-status="operational" title="Sep 20: No downtime"></li>
<li data-status="operational" title="Sep 21: No downtime"></li>
<li data-status="outage" title="Sep 22: Partial outage"></li>
<li data-status="operational" title="Sep 23: No downtime"></li>
<li data-status="operational" title="Sep 24: No downtime"></li>
<li data-status="operational" title="Sep 25: No downtime"></li>
<li data-status="operational" title="Sep 26: No downtime"></li>
<li data-status="operational" title="Sep 27: No downtime"></li>
<li data-status="operational" title="Sep 28: No downtime"></li>
<li data-status="operational" title="Sep 29: No downtime"></li>
<li data-status="operational" title="Sep 30: No downtime"></li>
<li data-status="operational" title="Oct 1: No downtime"></li>
<li data-status="operational" title="Oct 2: No downtime"></li>
<li data-status="operational" title="Oct 3: No downtime"></li>
<li data-status="operational" title="Oct 4: No downtime"></li>
</ol>
<p class="status-monitor__summary"><span><span class="sr-only">Last 30 days: </span>99.95% uptime</span><span>1 incident</span></p>
</li>
<li class="status-monitor__service">
<div class="status-monitor__row">
<h4 class="status-monitor__name" id="status-webhooks">Webhooks</h4>
<span class="status-monitor__status status-monitor__status--operational">Operational</span>
</div>
<ol class="status-monitor__bars" role="list" aria-hidden="true">
<li data-status="operational" title="Sep 5: No downtime"></li>
<li data-status="operational" title="Sep 6: No downtime"></li>
<li data-status="operational" title="Sep 7: No downtime"></li>
<li data-status="operational" title="Sep 8: No downtime"></li>
<li data-status="operational" title="Sep 9: No downtime"></li>
<li data-status="operational" title="Sep 10: No downtime"></li>
<li data-status="operational" title="Sep 11: No downtime"></li>
<li data-status="operational" title="Sep 12: No downtime"></li>
<li data-status="operational" title="Sep 13: No downtime"></li>
<li data-status="operational" title="Sep 14: No downtime"></li>
<li data-status="operational" title="Sep 15: No downtime"></li>
<li data-status="operational" title="Sep 16: No downtime"></li>
<li data-status="operational" title="Sep 17: No downtime"></li>
<li data-status="operational" title="Sep 18: No downtime"></li>
<li data-status="operational" title="Sep 19: No downtime"></li>
<li data-status="operational" title="Sep 20: No downtime"></li>
<li data-status="operational" title="Sep 21: No downtime"></li>
<li data-status="operational" title="Sep 22: No downtime"></li>
<li data-status="operational" title="Sep 23: No downtime"></li>
<li data-status="operational" title="Sep 24: No downtime"></li>
<li data-status="operational" title="Sep 25: No downtime"></li>
<li data-status="operational" title="Sep 26: No downtime"></li>
<li data-status="operational" title="Sep 27: No downtime"></li>
<li data-status="operational" title="Sep 28: No downtime"></li>
<li data-status="operational" title="Sep 29: No downtime"></li>
<li data-status="operational" title="Sep 30: No downtime"></li>
<li data-status="operational" title="Oct 1: No downtime"></li>
<li data-status="operational" title="Oct 2: No downtime"></li>
<li data-status="operational" title="Oct 3: No downtime"></li>
<li data-status="operational" title="Oct 4: No downtime"></li>
</ol>
<p class="status-monitor__summary"><span><span class="sr-only">Last 30 days: </span>100% uptime</span><span>No incidents</span></p>
</li>
</ul>
<footer class="status-monitor__footer">
<span><span aria-hidden="true">30 days ago</span></span>
<span>Updated <time datetime="2026-10-04T09:41">2 minutes ago</time></span>
<span><span aria-hidden="true">Today</span></span>
</footer>
</section>
<section class="metric-grid" aria-labelledby="metric-grid-title">
<header class="metric-grid__header">
<h2 class="metric-grid__title" id="metric-grid-title">Reliability</h2>
<p class="metric-grid__period">Last 90 days</p>
</header>
<ul class="metric-grid__list" role="list">
<li class="metric-grid__item metric-grid__item--good">
<p class="metric-grid__label">Uptime</p>
<p class="metric-grid__value">99.98%</p>
<p class="metric-grid__delta">
<svg class="metric-grid__arrow metric-grid__arrow--up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
<span><span class="sr-only">Up </span>0.02 pt</span>
<span class="metric-grid__compare">vs. previous period</span>
</p>
<svg class="metric-grid__sparkline" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<polyline points="0,40 9.09,38 18.18,39 27.27,36 36.36,37 45.45,34 54.55,35 63.64,33 72.73,34 81.82,32 90.91,31 100,30"/>
</svg>
</li>
<li class="metric-grid__item metric-grid__item--good">
<p class="metric-grid__label">Median response time</p>
<p class="metric-grid__value">182 ms</p>
<p class="metric-grid__delta">
<svg class="metric-grid__arrow metric-grid__arrow--down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
<span><span class="sr-only">Down </span>11%</span>
<span class="metric-grid__compare">vs. previous period</span>
</p>
<svg class="metric-grid__sparkline" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<polyline points="0,30 9.09,32 18.18,34 27.27,33 36.36,38 45.45,40 54.55,42 63.64,44 72.73,43 81.82,48 90.91,50 100,52"/>
</svg>
</li>
<li class="metric-grid__item metric-grid__item--good">
<p class="metric-grid__label">Incidents</p>
<p class="metric-grid__value">2</p>
<p class="metric-grid__delta">
<svg class="metric-grid__arrow metric-grid__arrow--down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
<span><span class="sr-only">Down </span>1</span>
<span class="metric-grid__compare">vs. previous period</span>
</p>
<svg class="metric-grid__sparkline" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<polyline points="0,50 9.09,50 18.18,30 27.27,50 36.36,50 45.45,50 54.55,40 63.64,50 72.73,50 81.82,50 90.91,50 100,50"/>
</svg>
</li>
</ul>
</section>
<form class="status-block__subscribe" action="#" method="post" aria-labelledby="status-subscribe-title">
<div class="status-block__subscribe-text">
<h3 class="status-block__subscribe-title" id="status-subscribe-title">Get notified about incidents</h3>
<p>We email you when an incident starts and when it’s resolved. Or follow the <a href="#">RSS feed</a>.</p>
</div>
<label class="sr-only" for="status-subscribe-email">Email address</label>
<input class="form-control" id="status-subscribe-email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required>
<button class="btn btn--primary" type="submit">Subscribe</button>
</form>
</div>
</div>
</section>
