Bento with Stats

The code

A glimpse of the source:

<div class="bento-container">
    <div class="bento-grid bento-stats" id="statsBento">
      <div class="bento-cell cell-1">
        <span class="stat-number" data-target="2847">0</span>
        <span class="stat-label">Utilisateurs actifs</span>
        <div class="stat-bar">
          <div class="stat-bar-fill" style="--fill-width: 95%;">
          </div>
        </div>
      </div>

Concrete use cases

A few real contexts where Bento with Stats shines:

• A team directory
• An e-commerce product grid
• A projects portfolio

How it works

CSS + a lightweight vanilla JavaScript script (no dependency). It relies on a @keyframes animation and CSS transforms.

Make it yours

You can tweak:

• 8 CSS variables to tweak colors, spacing and radii
• animation speed (currently 1s)

Add it in 3 steps

1. Paste the HTML where you want the effect on your page.
2. Add the CSS to your stylesheet (or in a <style> tag).
3. Add the small JavaScript snippet before </body> — done.

Browser support

Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.

More Cards effects

FAQ