A status badge footer built with pure HTML and CSS that displays a clear visual indicator such as active, maintenance, beta, or archived at the bottom of a page, helping users instantly understand current state without relying on JavaScript.
Usage
This component is ideal for interfaces where state awareness matters, such as system dashboards, product pages, service status views, documentation versions, or feature previews where users should always see the current condition or availability.
Implementation
The footer badge is implemented using CSS badge styling, inline alignment, and color semantics, allowing the status indicator to remain compact, readable, and visually distinct while staying responsive.
HTML
<footer class="footer-badge">
<span class="footer-badge__label">Status</span>
<span class="footer-badge__value">Active</span>
</footer>CSS
.footer-badge {
width: 200px;
padding: 0.75rem 1rem;
border-radius: 12px;
background: #ffffff;
border: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-badge__label {
font-size: 12px;
color: #6b7280;
}
.footer-badge__value {
font-size: 11px;
padding: 0.25rem 0.5rem;
border-radius: 999px;
background: #dcfce7;
color: #166534;
font-weight: 600;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Displays a clear state indicator
- Uses color and label for fast recognition
- Keeps status visible but unobtrusive
- Designed for system and product 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.