Version changelog

Version changelog: a CSS card. Copy the rules, or the prompt that rebuilds it.

changelogreleaseversionbadgelistlight

v2.3.0

Subgrid cards and :has() states

  • NewSubgrid-aligned card rows
  • FixFlip card focus ring on Safari
  • ImprovedPrompt wording for gradients
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
}
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>
Prompt

Build a 340px changelog card: white, 1px #e5e7eb border with a 3px indigo #6366f1 left border (darker on hover), 12px radius. Header: a monospace version chip "v2.3.0" on #eef2ff in #4338ca and a 12px #9ca3af date on the right. 16px release title, then a list of 13px items each prefixed by a tiny uppercase label chip: green "New" (#dcfce7/#15803d), red "Fix" (#fee2e2/#b91c1c), blue "Improved" (#dbeafe/#1d4ed8).