Stats Card

<div class="stats-card">

  <div class="stats-top">

    <span class="stats-label">
      Monthly Revenue
    </span>

    <span class="stats-growth">
      +18.4%
    </span>

  </div>

  <div class="stats-value">
    $48,290
  </div>

  <p class="stats-text">
    Revenue performance compared with the previous month.
  </p>

  <div class="stats-progress">

    <div class="stats-progress-head">
      <span>Progress</span>
      <strong>78%</strong>
    </div>

    <div class="stats-progress-track">
      <div class="stats-progress-bar"></div>
    </div>

  </div>

</div>

.stats-card{
  width:100%;
  max-width:360px;
  padding:30px;
  background:#08111f;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  color:#ffffff;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.stats-card:hover{
  transform:translateY(-7px);
  border-color:rgba(34,211,238,.45);
  box-shadow:
    0 26px 55px rgba(0,0,0,.35),
    0 0 28px rgba(34,211,238,.12);
}

.stats-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.stats-label{
  color:#9fb3cc;
  font-size:13px;
  font-weight:600;
}

.stats-growth{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(34,211,238,.10);
  color:#22d3ee;
  font-size:11px;
  font-weight:800;
}

.stats-value{
  margin-bottom:12px;
  color:#ffffff;
  font-size:38px;
  font-weight:800;
  line-height:1;
}

.stats-text{
  margin:0 0 24px;
  color:#8fa4bd;
  font-size:14px;
  line-height:1.6;
}

.stats-progress{
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
}

.stats-progress-head{
  display:flex;
  justify-content:space-between;
  margin-bottom:10px;
  color:#8fa4bd;
  font-size:12px;
}

.stats-progress-head strong{
  color:#ffffff;
}

.stats-progress-track{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#111d2d;
}

.stats-progress-bar{
  width:78%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    #22d3ee,
    #8b5cf6
  );
}

How This Stats Card Works

The Stats Card is a compact dashboard component designed to present one important metric with supporting context and a visual progress indicator. The published version uses only HTML and CSS. There is no JavaScript, so the card’s interaction and appearance are handled entirely through layout styles, hover states, and a fixed progress-bar width.

The main .stats-card container uses width: 100% together with max-width: 360px. This lets the component shrink inside a narrower parent while keeping it from stretching beyond its intended desktop size. It has 30px of padding, a 20px border radius, and a dark #08111f background.

A subtle semi-transparent white border separates the card from the surrounding page. The default box-shadow adds depth beneath the panel, while the hover state strengthens that shadow and introduces a faint cyan glow.

The complete card responds to hover with transform: translateY(-7px). This lifts the panel slightly without changing the layout around it. The transform, border color, and shadow all use .3s ease transitions, so these changes happen smoothly. For more information about this behavior, see the MDN CSS transition documentation.

At the top, .stats-top uses Flexbox with justify-content: space-between. This places the “Monthly Revenue” label on the left and the +18.4% growth badge on the right. A 16px gap helps prevent the two pieces of information from sitting too close together.

The label uses a muted #9fb3cc color, a 13px font size, and font-weight: 600. The growth percentage is more prominent because it appears inside a pill-shaped badge. Its border-radius: 999px produces the fully rounded shape, while the background uses a translucent cyan value.

The main revenue value, $48,290, is displayed by .stats-value. It uses a large 38px font size, font-weight: 800, and line-height: 1, making it the strongest visual element in the card. A 12px bottom margin separates it from the explanatory paragraph below.

The supporting text uses a softer #8fa4bd color and a 14px font size. Its line-height: 1.6 gives the sentence enough vertical spacing to remain readable inside the relatively narrow card.

The lower section is separated using .stats-progress, which adds 20px of top padding and a faint top border. This creates a clear division between the primary revenue information and the progress indicator.

Inside this section, .stats-progress-head uses Flexbox to place the “Progress” label on the left and 78% on the right. The percentage is wrapped in a <strong> element and displayed in white, while the label remains muted.

The progress track is an 8px-high horizontal bar with overflow: hidden and a fully rounded 999px border radius. Its dark #111d2d background represents the unused portion of the progress indicator.

The inner .stats-progress-bar has width: 78%, matching the visible percentage shown above it. Its background uses a 90-degree linear gradient from cyan #22d3ee to purple #8b5cf6. Because this width is defined directly in CSS, the progress is static rather than dynamically calculated.

Customizing This Stats Card

The component can be adapted for different dashboards or performance metrics by changing a few existing values and text elements.

• Change the 360px max-width to make the card wider or narrower.
• Adjust the 30px padding and 20px border radius to change its spacing and shape.
• Replace #08111f and #111d2d to customize the card and progress-track backgrounds.
• Change #22d3ee and #8b5cf6 to use a different badge and progress-bar color scheme.
• Edit the $48,290 value, “Monthly Revenue” label, +18.4% badge, and supporting description for another metric.
• Change the 38px .stats-value font size if the main number needs more or less emphasis.
• Adjust translateY(-7px) to increase or reduce the hover lift.
• Update both the visible 78% text and the width: 78% value on .stats-progress-bar when displaying a different progress amount.

Where to Use This Stats Card

The layout is suitable for interfaces that need to highlight one key performance figure together with a secondary progress measurement.

• Analytics dashboards.
• Revenue and sales reports.
• SaaS admin panels.
• Monthly performance summaries.
• Marketing metric dashboards.
• Project progress interfaces.
• Business and finance overview pages.

Because the component uses a flexible width and no JavaScript dependency, several copies can be placed inside a responsive dashboard grid with different labels and values. For a more interactive data-focused product card, the 3D Smartwatch Fitness Dashboard Reveal Card is a related CodeRipple component.

Frequently Asked Questions

Does the Stats Card use JavaScript?

No. The published component contains HTML and CSS only. The hover effect and progress bar are both controlled entirely through CSS.

Is the 78% progress value calculated automatically?

No. The visible 78% text and the .stats-progress-bar width are both written directly into the component. If the percentage changes, those values need to be updated accordingly.

Is the Stats Card responsive?

There is no separate media query, but the card uses width: 100% and max-width: 360px. This lets it shrink with a narrower parent container while keeping its maximum intended width.

How does the hover effect work?

The .stats-card:hover rule applies translateY(-7px), changes the border to a more visible cyan tone, and increases the shadow. These properties transition over .3s ease.

The Stats Card provides a straightforward way to present a headline metric, growth indicator, descriptive context, and progress value in a compact CSS-only dashboard component.