Section
Changelog
Vertical changelog with version tags and timeline.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/Products/product-changelog Vanilla/Sections/Products/product-changelog <!-- Snippet Name: Changelog | Family: Products | Description: Vertical changelog with version tags and timeline. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changelog | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: product-changelog. Copy, customize, ship.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.pc .head{margin-bottom:30px}.pc .head h2{margin:12px 0 8px}
.pc .log{display:grid;gap:0;position:relative;padding-left:14px}
.pc .log::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:3px;background:var(--border)}
.pc .entry{position:relative;padding:0 0 26px 36px}
.pc .entry:last-child{padding-bottom:0}
.pc .entry::before{content:"";position:absolute;left:-2px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--border)}
.pc .entry.major::before{background:var(--primary)}.pc .entry.fix::before{background:var(--pink)}
.pc .entry .ver{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pc .entry .ver b{font-size:1.1rem}.pc .entry .date{color:var(--muted);font-size:.82rem}
.pc .entry ul{margin:6px 0 0;padding-left:18px}.pc .entry li{margin-bottom:4px}
.pc .entry .tag{font-size:.68rem;font-weight:800;padding:2px 7px;border:2px solid var(--border);border-radius:999px;background:var(--bg)}
.pc .tag.new{background:var(--lime)}.pc .tag.imp{background:var(--accent)}.pc .tag.fix{background:var(--pink);color:#fff}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="pc" aria-labelledby="pc-title">
<div class="container">
<div class="head"><span class="eyebrow">Changelog</span><h2 id="pc-title">What shipped lately.</h2></div>
<div class="log">
<div class="entry major"><div class="ver"><b>v2.4.0</b><time class="date">Apr 12, 2026</time><span class="tag new">new</span></div><ul><li>Command palette with fuzzy search</li><li>Workspace-level themes</li></ul></div>
<div class="entry"><div class="ver"><b>v2.3.2</b><time class="date">Apr 02, 2026</time><span class="tag imp">improved</span></div><ul><li>40% faster board rendering</li><li>Better keyboard hints</li></ul></div>
<div class="entry fix"><div class="ver"><b>v2.3.1</b><time class="date">Mar 28, 2026</time><span class="tag fix">fix</span></div><ul><li>Fixed rare sync conflict on shared boards</li></ul></div>
<div class="entry"><div class="ver"><b>v2.3.0</b><time class="date">Mar 15, 2026</time><span class="tag new">new</span></div><ul><li>SAML SSO for Enterprise</li><li>Audit log export</li></ul></div>
</div>
</div>
</section>
</body>
</html># Changelog
Vertical changelog with version tags and timeline.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / products
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** product, changelog, timeline
**Features:** light/dark, responsive
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 102 lines UTF-8 · LF · Spaces: 2
Continue browsing