numbers-grid

Summary

A four-card stats strip where each card uses a different background colour (rust orange, mid grey, near-black, light grey) and starts with a small contrasting circle in the top-left. The big number sits at the bottom-left of each card.

HTML structure (minimal)

<div class="numbers-section">
  <div class="main-container">
    <div class="numbers-grid">
      <div class="numbers-item numbers-item-orange">
        <div class="number-circle number-circle-black"></div>
        <div class="number-text-box">
          <div class="number-text-small">Numbers and Facts</div>
        </div>
      </div>
      <div class="numbers-item numbers-item-grey">
        <div class="number-circle circle-dark"></div>
        <div class="number-text-box">
          <div class="number-text-big">15+</div>
          <div class="number-text-small">Numbers and Facts</div>
        </div>
      </div>
      <div class="numbers-item numbers-item-dark">
        <div class="number-circle circle-orange"></div>
        <div class="number-text-box">
          <div class="number-text-big">82+</div>
          <div class="number-text-small">Completed Projects</div>
        </div>
      </div>
      <div class="numbers-item numbers-item-grey-light">
        <div class="number-circle circle-grey"></div>
        <div class="number-text-box">
          <div class="number-text-big">12+</div>
          <div class="number-text-small">Awards Won</div>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.numbers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.numbers-item {
  border-radius: 5px;
  min-height: 320px;
  padding: 20px;
  display: flex;
  flex-flow: column;
}
.numbers-item.numbers-item-orange     { background-color: #dc5f00; }
.numbers-item.numbers-item-grey       { background-color: #4a4a4a; }
.numbers-item.numbers-item-dark       { background-color: #191919; }
.numbers-item.numbers-item-grey-light { background-color: #939393; }

.number-circle                        { width: 20px; height: 20px; border-radius: 50%; }
.number-circle.number-circle-black    { background-color: #0f0f0f; }
.number-circle.circle-dark            { background-color: #242424; }
.number-circle.circle-orange          { background-color: var(--default); }
.number-circle.circle-grey            { background-color: #b7b7b7; }

.number-text-box  { margin-top: auto; }   // pushes the big number to the bottom
.number-text-big  { font-size: 70px; font-weight: 500; line-height: 50px; margin-bottom: 15px; }
.number-text-small{ text-transform: capitalize; }

Animation logic

// Each card has an IX2 entrance (data-w-id="darkyn14".."darkyn17") that
// fades from opacity:0 with a translateY. Equivalent in plain JS:
//   IntersectionObserver on .numbers-item; on intersect add a class that
//   transitions opacity 0→1 and transform translateY(40px)→0 with a
//   100ms stagger between siblings.

Notable details

• The first orange card intentionally has no big number — it acts as a label/title for the strip ("Numbers and Facts"), turning a stats row into a stats block with a heading baked in.
• Corner dot tokens are pure decoration but read as count markers — a cheap way to make data cards feel intentional without icons.
• margin-top: auto on .number-text-box is what gives every card its bottom-anchored layout; min-height keeps them aligned.

Use when

• Agency/portfolio stats strips that want personality and a brand pop without the cliché odometer animation.
• Sections where you'd otherwise reach for icon stat-cards but the brand isn't iconographic.

Caveats

• None known.