Design Atlas
한국어
▭ Landing page patterns

Changelog feed

체인지로그 피드

A reverse-chronological feed of releases that shows a product is actively, continuously improved.

Also known as: Release notes feedUpdates timeline
···
html
<div class="log" id="log">
  <div class="entry new"><span class="dot"></span><div class="body"><span class="ver">v2.4</span><span class="date">Just now</span><p>Dark mode is here.</p></div></div>
  <div class="entry"><span class="dot"></span><div class="body"><span class="ver">v2.3</span><span class="date">2 weeks ago</span><p>Faster search across large workspaces.</p></div></div>
  <div class="entry"><span class="dot"></span><div class="body"><span class="ver">v2.2</span><span class="date">5 weeks ago</span><p>Bulk export to CSV.</p></div></div>
  <div class="entry"><span class="dot"></span><div class="body"><span class="ver">v2.1</span><span class="date">2 months ago</span><p>Team roles and permissions.</p></div></div>
</div>
css
.log{width:min(90%,540px);position:relative;padding-left:clamp(14px,3vmin,20px)}
.log::before{content:'';position:absolute;left:clamp(4px,1vmin,6px);top:6px;bottom:6px;width:2px;background:var(--line)}
.entry{position:relative;padding-bottom:clamp(10px,2.4vmin,18px)}
.entry:last-child{padding-bottom:0}
.dot{position:absolute;left:clamp(-11px,-2.2vmin,-15px);top:3px;width:clamp(7px,1.5vmin,11px);
  height:clamp(7px,1.5vmin,11px);border-radius:50%;background:var(--line);border:2px solid var(--bg)}
.entry.new .dot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 25%,transparent)}
.body{display:flex;flex-direction:column;gap:2%}
.ver{font-size:clamp(7px,1.4vmin,11px);font-weight:800;color:var(--accent)}
.date{font-size:clamp(6px,1.1vmin,9px);color:var(--muted)}
.body p{margin:0;font-size:clamp(7.5px,1.4vmin,11px)}
.entry.new{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:1}50%{opacity:.75}}

A vertical timeline of version numbers, dates, and short descriptions, newest first. Each entry usually pairs a version badge ("v1.4"), a date, one or two lines of summary, and sometimes a tag ("New," "Improved," "Fixed") — a line and dots down the left edge make the chronology visible at a glance.

Having this section at all is itself a signal — it says the product is actively maintained, not abandoned, which matters a lot in B2B buying decisions where "is this company even still around" is a real question. Landing pages usually show only the latest four to six entries and link out to a full `/changelog` page for the rest.

Listing changes users can't actually feel — internal refactors, dependency bumps — reads as noise and does nothing for anyone. Favor changes people notice ("Dark mode is here," "Load times cut in half"), and when a new entry lands, give the top item a subtle highlight so it reads as freshly posted.

When to use

Use for products that genuinely ship updates often — at least monthly. With infrequent updates, a sparse timeline backfires and looks abandoned instead.