HTML / CSS

Responsive status card

A compact status surface that keeps a clear hierarchy from dashboard width down to a narrow mobile column.

Preview

Rendered after Run

Source

Safe editing

The canonical example stays in this scoped editor. Use Run to apply a safe preview, and Reset to restore the documented source.

Editable source

.status-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #62e3ff;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
  }

.status-card__eyebrow::before {
    content: "";
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: #7af0b5;
    box-shadow: 0 0 10px rgba(122, 240, 181, 0.6);
  }

.status-card__body {
    margin-top: 1rem;
  }

.status-card__body h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1.2;
  }

.status-card__body p {
    margin: 0.55rem 0 0;
    color: #b7c3d9;
    line-height: 1.6;
  }

.status-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-top: 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(98, 227, 255, 0.18);
    color: #dce8f9;
    font-size: 0.9rem;
  }

.status-card__meta strong {
    color: #7af0b5;
    font-size: 1.1rem;
  }
</style>
<section class="status-card" aria-label="Service status card">
  <div class="status-card__eyebrow">System status</div>
  <div class="status-card__body">
    <h2>Operations stable</h2>
    <p>All monitored services are responding within expected thresholds and no urgent action is required.</p>
  </div>
  <div class="status-card__meta">
    <span>Updated 2 minutes ago</span>
    <strong>99.97%</strong>
  </div>
</section>

This example is ready to run in the constrained preview.

HTML / CSS · semantic HTML, inline CSS
Max 5,000 characters and 200 lines
Allowed tags: style, section, div, h2, p, span, strong

Purpose and context

This example was authored as a small interface study: establish the status first, then give supporting detail enough room to breathe.

Implementation notes

The structure uses semantic content grouping and responsive CSS rather than relying on a fixed image or a JavaScript layout system.

Intended use

Useful for product dashboards, account summaries, and other content-led surfaces where a short state needs to be understood quickly.