An inline utility footer row built with pure HTML and CSS that arranges secondary links, legal text, or utility actions in a single horizontal line, keeping the footer compact, readable, and unobtrusive without relying on JavaScript.
Usage
This component is ideal for footers where supporting information should stay accessible but low-priority, such as privacy links, terms, language selectors, copyright notices, or small utility actions that shouldn’t compete with primary content.
Implementation
The inline layout is achieved using CSS flex alignment, spacing control, and responsive wrapping, allowing footer items to stay on one line when space permits and wrap cleanly on smaller screens.
HTML
<footer class="footer-utility">
<a href="#">Docs</a>
<a href="#">API</a>
<a href="#">Help</a>
</footer>CSS
.footer-utility {
width: 200px;
padding: 0.5rem;
border-radius: 16px;
background: #020617;
display: flex;
justify-content: space-around;
font-size: 11px;
}
.footer-utility a {
color: #9ca3af;
text-decoration: none;
transition: color 150ms ease;
}
.footer-utility a:hover {
color: #e5e7eb;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Displays utilities in a single inline row
- Keeps footer visually lightweight
- Wraps gracefully on narrow viewports
- Designed for secondary, low-attention content
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.