A timestamp meta footer built with pure HTML and CSS that displays time based metadata such as last updated, published date, or version time helping users understand content freshness without relying on JavaScript or external libraries.
Usage
This component is ideal for pages where content timing adds trust or clarity, such as documentation, changelogs, blog posts, release notes, legal pages, or status pages where knowing when information was last updated matters.
Implementation
The footer is implemented using semantic HTML elements, inline text styling, and subtle visual hierarchy, allowing timestamps to remain visible but secondary, while staying responsive and lightweight.
HTML
<footer class="footer-timestamp">
<span class="footer-timestamp__label">Updated</span>
<time class="footer-timestamp__time">2h ago</time>
</footer>CSS
.footer-timestamp {
width: 200px;
padding: 0.6rem 0.75rem;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 10px 22px rgba(0,0,0,0.12);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
}
.footer-timestamp__label {
color: #6b7280;
}
.footer-timestamp__time {
font-weight: 600;
color: #111827;
}
@media (prefers-color-scheme: dark) {
.footer-timestamp {
background: #020617;
}
.footer-timestamp__label {
color: #9ca3af;
}
.footer-timestamp__time {
color: #e5e7eb;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Displays time based metadata clearly
- Enhances transparency and content trust
- Keeps timestamps visually secondary
- Designed for documentation and info pages
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.