Skip to content

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.

More footers components

← Browse all NudaUI components