Responsive Metric Cards - Web Replay Lab

HTML structure, CSS grid, and browser-sized visual frames show metric cards moving from one column to a dashboard row.

Program

A replay lesson can show declarative layout changing across keyframes: the same source creates different rendered arrangements as CSS rules apply.

responsive_metric_cards.html

<section class="metrics">
  <article><b>Visitors</b><span>1,284</span></article>
  <article><b>Orders</b><span>87</span></article>
  <article><b>Revenue</b><span>$9.4k</span></article>
</section>
<style>
  .metrics { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
  article { border: 1px solid #cbd5e1; padding: 16px; }
</style>

source and output The replay pairs the declarative source with rendered browser frames.

responsive layout Grid columns can express a dashboard row without scripting.