Changelog & Version Chip Footer
A copy-paste footers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
FootersHTMLCSSany framework
Copy into your project
HTML
<!-- Changelog & Version Chip Footer -->
<footer class="nuda-ft2-changelog-chip">
<a href="#" class="nuda-ft2-changelog-chip__link">
<span>What's new</span>
<span class="nuda-ft2-changelog-chip__badge">v2.4.0</span>
<span class="nuda-ft2-changelog-chip__new" aria-hidden="true">NEW</span>
<svg class="nuda-ft2-changelog-chip__arrow" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14M13 5l7 7-7 7" />
</svg>
</a>
<span class="nuda-ft2-changelog-chip__meta">Updated 2 days ago</span>
</footer>CSS
.nuda-ft2-changelog-chip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 14px 18px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
width: 100%;
max-width: 320px;
font-size: 12px;
}
.nuda-ft2-changelog-chip__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fafafa;
text-decoration: none;
font-weight: 500;
}
.nuda-ft2-changelog-chip__link:hover {
color: #e4ff54;
}
.nuda-ft2-changelog-chip__link:focus-visible {
outline: 2px solid #e4ff54;
outline-offset: 3px;
border-radius: 4px;
}
.nuda-ft2-changelog-chip__badge {
padding: 2px 7px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
font-size: 10px;
color: #a0a0a8;
font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
}
.nuda-ft2-changelog-chip__new {
padding: 2px 6px;
background: #e4ff54;
color: #09090b;
border-radius: 4px;
font-size: 9px;
font-weight: 700;
letter-spacing: .04em;
animation: _nuda-ft2ChangelogChipPulse 1.8s ease-in-out infinite;
}
.nuda-ft2-changelog-chip__arrow {
width: 14px;
height: 14px;
transition: transform .2s;
}
.nuda-ft2-changelog-chip__link:hover .nuda-ft2-changelog-chip__arrow {
transform: translateX(4px);
}
.nuda-ft2-changelog-chip__meta {
color: #777;
}
@keyframes _nuda-ft2ChangelogChipPulse {
0%,100% {
transform: scale(1);
}
50% {
transform: scale(1.12);
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-ft2-changelog-chip__new {
animation: none;
}
.nuda-ft2-changelog-chip__arrow {
transition: none;
}
}
How to use Changelog & Version Chip Footer
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.