# Versions-Changelog (C 095)

Kategorie: Cards  
Tags: changelog, release, version, badge, list, light  
Seite: https://designforai.dev/de/snippet/card-095

## Prompt

Baue eine 340px Changelog-Card: weiß, 1px #e5e7eb Rahmen mit 3px indigofarbenem #6366f1 linken Rahmen (dunkler beim Hover), 12px Radius. Kopf: ein Monospace-Versions-Chip "v2.3.0" auf #eef2ff in #4338ca und ein 12px #9ca3af Datum rechts. 16px Release-Titel, dann eine Liste aus 13px Einträgen, jeder mit einem winzigen Versalien-Label-Chip davor: grün "New" (#dcfce7/#15803d), rot "Fix" (#fee2e2/#b91c1c), blau "Improved" (#dbeafe/#1d4ed8).

## HTML

```html
<article class="card-095">
  <header><span class="card-095__ver">v2.3.0</span><time>Sep 9, 2026</time></header>
  <h3>Subgrid cards and :has() states</h3>
  <ul>
    <li><i class="card-095__new">New</i>Subgrid-aligned card rows</li>
    <li><i class="card-095__fix">Fix</i>Flip card focus ring on Safari</li>
    <li><i class="card-095__imp">Improved</i>Prompt wording for gradients</li>
  </ul>
</article>
```

## CSS

```css
.card-095 {
  width: 340px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #6366f1;
  border-radius: 12px;
  font-family: system-ui,sans-serif;
  color: #111827
}
.card-095 header {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.card-095__ver {
  padding: 3px 9px;
  border-radius: 6px;
  background: #eef2ff;
  color: #4338ca;
  font-family: ui-monospace,monospace;
  font-size: 12px;
  font-weight: 700
}
.card-095 time {
  font-size: 12px;
  color: #9ca3af
}
.card-095 h3 {
  margin: 10px 0 10px;
  font-size: 16px
}
.card-095 ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px
}
.card-095 li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0
}
.card-095 li i {
  flex: none;
  min-width: 36px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase
}
.card-095__new {
  background: #dcfce7;
  color: #15803d
}
.card-095__fix {
  background: #fee2e2;
  color: #b91c1c
}
.card-095__imp {
  background: #dbeafe;
  color: #1d4ed8
}
.card-095:hover {
  border-left-color: #4338ca
}
```