Design for AIFortschrittsring-Kennzahl
Fortschrittsring-Kennzahl: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
72%
CSS
.card-062 {
display: flex;
align-items: center;
gap: 18px;
width: 300px;
padding: 18px 20px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
font-family: system-ui,sans-serif;
color: #111827
}
.card-062__ring {
flex: none;
width: 80px;
height: 80px;
display: grid;
place-items: center;
border-radius: 50%;
background: conic-gradient(#8b5cf6 0 72%,#ede9fe 72% 100%);
transition: filter .2s
}
.card-062__ring::before {
content: "";
grid-area: 1/1;
width: 62px;
height: 62px;
border-radius: 50%;
background: #fff
}
.card-062__ring b {
grid-area: 1/1;
font-size: 16px;
font-weight: 700;
color: #5b21b6
}
.card-062:hover .card-062__ring {
filter: saturate(1.3)
}
.card-062 h3 {
margin: 0 0 2px;
font-size: 15px
}
.card-062 p {
margin: 0 0 8px;
font-size: 13px;
color: #6b7280
}
.card-062 a {
font-size: 13px;
font-weight: 600;
color: #7c3aed;
text-decoration: none
}
.card-062 a:hover {
text-decoration: underline
}
.card-062 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-062">
<div class="card-062__ring"><b>72%</b></div>
<div class="card-062__text"><h3>Storage used</h3><p>36 GB of 50 GB</p><a href="#">Manage</a></div>
</article>Prompt
Baue eine 300px KPI-Card mit Fortschrittsring: weiß, 1px #e5e7eb Rahmen, 16px Radius, Flex-Zeile. Links ein 80px Kreis aus conic-gradient(#8b5cf6 0 72%, #ede9fe 72% 100%), mit einem 62px weißen Kreis in der Mitte gestapelt (grid-area 1/1) und dem Label "72%" in 16px bold #5b21b6 obendrauf. Rechts: 15px Titel "Storage used", 13px #6b7280 "36 GB of 50 GB" und ein violetter "Manage" Link. Der Ring wird beim Hover leicht gesättigter.