Design for AIBento-Kennzahl-Kacheln
Bento-Kennzahl-Kacheln: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
1.2Mrequests in the last 24 hours
99.9%uptime
42msp95 latency
Zero configDeploy from a git push
CSS
.card-042 {
display: grid;
grid-template-columns: repeat(2,160px);
gap: 12px;
font-family: system-ui,sans-serif
}
.card-042__tile {
padding: 18px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
color: #111827;
transition: transform .2s,box-shadow .2s
}
.card-042__tile:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,.08)
}
.card-042__tile--wide {
grid-column: span 2
}
.card-042__tile--accent {
background: linear-gradient(135deg,#111827,#1f2937);
color: #fff;
border-color: #111827
}
.card-042 b {
display: block;
font-size: 24px;
font-weight: 800;
letter-spacing: -.02em
}
.card-042 span {
font-size: 13px;
color: #6b7280
}
.card-042__tile--accent span {
color: #9ca3af
}
HTML
<div class="card-042">
<div class="card-042__tile card-042__tile--wide"><b>1.2M</b><span>requests in the last 24 hours</span></div>
<div class="card-042__tile"><b>99.9%</b><span>uptime</span></div>
<div class="card-042__tile"><b>42ms</b><span>p95 latency</span></div>
<div class="card-042__tile card-042__tile--wide card-042__tile--accent"><b>Zero config</b><span>Deploy from a git push</span></div>
</div>Prompt
Baue ein Bento-Grid aus vier Kacheln: zwei Spalten zu 160px mit 12px Gap. Kacheln sind weiß mit 1px #e5e7eb Rahmen, 16px Radius, 18px Padding, beim Hover 3px angehoben mit weichem Schatten. Kachel 1 spannt über beide Spalten ("1.2M / requests in the last 24 hours"), Kacheln 2 und 3 sind einzeln ("99.9% uptime", "42ms p95 latency"), Kachel 4 spannt über beide Spalten und ist dunkel (135deg Gradient #111827 zu #1f2937, weißer Text, graue #9ca3af Bildunterschrift). Zahlen sind 24px extra-bold, Bildunterschriften 13px #6b7280.