Bento Feature Card

1<section class="bn-card" aria-label="Feature-Übersicht">
2  <div class="bn-tile bn-a" tabindex="0">
3    <div class="bn-grid-bg" aria-hidden="true"></div>
4    <h3>Analytics</h3>
5    <p>Echtzeit-Einblicke in deine wichtigsten Kennzahlen.</p>
6    <div class="bn-bars" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>
7  </div>
8  <div class="bn-tile bn-b" tabindex="0">
9    <div class="bn-ring" aria-hidden="true"><span>87%</span></div>
10    <h4>Score</h4>
11  </div>
12  <div class="bn-tile bn-c" tabindex="0">
13    <div class="bn-dot" aria-hidden="true"></div>
14    <h4>Live</h4>
15    <p>2.4k aktiv</p>
16  </div>
17  <div class="bn-tile bn-d" tabindex="0">
18    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
19      <path d="M13 2L3 14h7l-1 8 10-12h-7z"/>
20    </svg>
21    <h4>Schnell</h4>
22    <p>Blitzschnelle Ladezeiten & Edge-Caching weltweit.</p>
23  </div>
24</section>