A signal band footer strip built with pure HTML and CSS that uses a visually distinct horizontal band at the bottom of the page to surface important signals, notices, or actions without overpowering the main content or relying on JavaScript.
Usage
This component is ideal for scenarios where footer level messages need visibility, such as announcements, consent notices, status indicators, promotional reminders, or secondary calls to action that should remain noticeable but contained.
Implementation
The band is implemented using CSS full width containers, background contrast styling, and inline alignment, allowing content to stretch edge-to-edge while remaining readable and responsive across screen sizes.
HTML
<footer class="footer-signal">
<span class="footer-signal__label">Status</span>
<span class="footer-signal__value">Operational</span>
</footer>CSS
.footer-signal {
width: 200px;
padding: 0.55rem 0.75rem;
border-radius: 14px;
background: #020617;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: inset 0 1px 0 #1e293b;
}
.footer-signal__label {
font-size: 11px;
color: #9ca3af;
}
.footer-signal__value {
font-size: 11px;
font-weight: 600;
color: #4ade80;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses a full width signal band layout
- Separates important messages from main content
- Maintains strong visual hierarchy
- Designed for persistent or semi persistent notices
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.