Mega Footers
Complex footers with links, socials, and newsletter.
Mega Footer — 4 Columns
<footer class="uk-footer">
<div class="uk-footer-top">
<div class="uk-footer-brand-col">
<div class="uk-footer-brand">
<i class="fas fa-cube"></i>
<span>Nexus</span>
</div>
<p class="uk-footer-brand-desc">The component library that helps teams design faster...</p>
<div class="uk-footer-socials">
<a href="#" class="uk-footer-social"><i class="fab fa-twitter"></i></a>
<a href="#" class="uk-footer-social"><i class="fab fa-github"></i></a>
<a href="#" class="uk-footer-social"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="uk-footer-social"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="uk-footer-col">
<div class="uk-footer-col-title">Product</div>
<a href="#" class="uk-footer-link">Components</a>
<a href="#" class="uk-footer-link">Templates</a>
<a href="#" class="uk-footer-link">Changelog</a>
<a href="#" class="uk-footer-link">Roadmap</a>
<a href="#" class="uk-footer-link">Pricing</a>
</div>
<div class="uk-footer-col">
<div class="uk-footer-col-title">Company</div>
<a href="#" class="uk-footer-link">About</a>
<a href="#" class="uk-footer-link">Blog</a>
<a href="#" class="uk-footer-link">Careers <span class="uk-footer-badge">Hiring</span></a>
<a href="#" class="uk-footer-link">Contact</a>
<a href="#" class="uk-footer-link">Press</a>
</div>
<div class="uk-footer-col">
<div class="uk-footer-col-title">Resources</div>
<a href="#" class="uk-footer-link">Documentation</a>
<a href="#" class="uk-footer-link">API Reference</a>
<a href="#" class="uk-footer-link">Guides</a>
<a href="#" class="uk-footer-link">Community</a>
<a href="#" class="uk-footer-link">Status</a>
</div>
</div>
<div class="uk-footer-bottom">
<span class="uk-footer-copy">© 2025 Nexus Inc. All rights reserved.</span>
<div class="uk-footer-legal">
<a href="#" class="uk-footer-legal-link">Privacy</a>
<a href="#" class="uk-footer-legal-link">Terms</a>
<a href="#" class="uk-footer-legal-link">Cookies</a>
</div>
</div>
</footer>
<style>
.uk-footer {
background: #0b1b2f;
color: #cbd5e1;
padding: 3.5rem 2rem 1.5rem;
}
.uk-footer-top {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.uk-footer-brand {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 1.15rem;
font-weight: 800;
color: #fff;
margin-bottom: 1rem;
}
.uk-footer-brand i {
color: #60a5fa;
font-size: 1.25rem;
}
.uk-footer-brand-desc {
font-size: 0.82rem;
line-height: 1.7;
color: #94a3b8;
margin-bottom: 1.5rem;
max-width: 300px;
}
.uk-footer-socials {
display: flex;
gap: 0.5rem;
}
.uk-footer-social {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.06);
color: #cbd5e1;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.15s;
}
.uk-footer-social:hover {
background: #1e3a8a;
color: #fff;
transform: translateY(-2px);
}
.uk-footer-col {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.uk-footer-col-title {
font-size: 0.72rem;
font-weight: 800;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.35rem;
}
.uk-footer-link {
font-size: 0.82rem;
color: #94a3b8;
text-decoration: none;
transition: color 0.15s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
width: fit-content;
}
.uk-footer-link:hover {
color: #fff;
}
.uk-footer-badge {
font-size: 0.6rem;
font-weight: 800;
color: #fff;
background: #22c55e;
padding: 2px 7px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.uk-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
max-width: 1100px;
margin: 0 auto;
padding-top: 1.5rem;
}
.uk-footer-copy {
font-size: 0.75rem;
color: #64748b;
}
.uk-footer-legal {
display: flex;
gap: 1.25rem;
}
.uk-footer-legal-link {
font-size: 0.75rem;
color: #94a3b8;
text-decoration: none;
transition: color 0.15s;
}
.uk-footer-legal-link:hover {
color: #fff;
}
@media (max-width: 860px) {
.uk-footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
.uk-footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.uk-footer-top { grid-template-columns: 1fr; }
.uk-footer-bottom { flex-direction: column; align-items: flex-start; }
}
</style>
Mega Footer with App Badges
<footer class="uk-footer">
<div class="uk-footer-top">
<div class="uk-footer-brand-col">
<div class="uk-footer-brand"><i class="fas fa-bolt"></i><span>Volt</span></div>
<p class="uk-footer-brand-desc">Take your productivity anywhere...</p>
<div class="uk-footer-apps">
<a href="#" class="uk-footer-app-badge">
<i class="fab fa-apple"></i>
<span class="uk-footer-app-text">
<span class="uk-footer-app-small">Download on the</span>
<span class="uk-footer-app-big">App Store</span>
</span>
</a>
<a href="#" class="uk-footer-app-badge">
<i class="fab fa-google-play"></i>
<span class="uk-footer-app-text">
<span class="uk-footer-app-small">Get it on</span>
<span class="uk-footer-app-big">Google Play</span>
</span>
</a>
</div>
</div>
<div class="uk-footer-col">
<div class="uk-footer-col-title">Product</div>
<a href="#" class="uk-footer-link">Features</a>
<a href="#" class="uk-footer-link">Integrations</a>
<a href="#" class="uk-footer-link">Pricing</a>
<a href="#" class="uk-footer-link">Changelog</a>
</div>
<div class="uk-footer-col">
<div class="uk-footer-col-title">Company</div>
<a href="#" class="uk-footer-link">About</a>
<a href="#" class="uk-footer-link">Careers</a>
<a href="#" class="uk-footer-link">Press Kit</a>
<a href="#" class="uk-footer-link">Contact</a>
</div>
<div class="uk-footer-col">
<div class="uk-footer-col-title">Support</div>
<a href="#" class="uk-footer-link">Help Center</a>
<a href="#" class="uk-footer-link">Status</a>
<a href="#" class="uk-footer-link">Community</a>
<a href="#" class="uk-footer-link">Security</a>
</div>
</div>
<div class="uk-footer-trust">
<div class="uk-footer-trust-badges">
<span class="uk-footer-trust-badge"><i class="fas fa-shield-halved"></i> SOC 2</span>
<span class="uk-footer-trust-badge"><i class="fas fa-lock"></i> GDPR</span>
<span class="uk-footer-trust-badge"><i class="fas fa-certificate"></i> ISO 27001</span>
</div>
<div class="uk-footer-socials">
<a href="#" class="uk-footer-social"><i class="fab fa-twitter"></i></a>
<a href="#" class="uk-footer-social"><i class="fab fa-github"></i></a>
<a href="#" class="uk-footer-social"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="uk-footer-bottom">
<span class="uk-footer-copy">© 2025 Volt Technologies. All rights reserved.</span>
<div class="uk-footer-legal">
<a href="#" class="uk-footer-legal-link">Privacy</a>
<a href="#" class="uk-footer-legal-link">Terms</a>
<a href="#" class="uk-footer-legal-link">Cookies</a>
</div>
</div>
</footer>
<style>
.uk-footer {
background: #0b1b2f;
color: #cbd5e1;
padding: 3.5rem 2rem 1.5rem;
}
.uk-footer-top {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
padding-bottom: 2rem;
}
.uk-footer-brand {
display: flex; align-items: center; gap: 0.6rem;
font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 1rem;
}
.uk-footer-brand i { color: #fbbf24; font-size: 1.25rem; }
.uk-footer-brand-desc {
font-size: 0.82rem; line-height: 1.7; color: #94a3b8;
margin-bottom: 1.5rem; max-width: 300px;
}
.uk-footer-apps { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.uk-footer-app-badge {
display: inline-flex; align-items: center; gap: 0.6rem;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 0.5rem; padding: 0.5rem 0.9rem;
color: #fff; text-decoration: none; transition: all 0.15s;
}
.uk-footer-app-badge:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.2);
}
.uk-footer-app-badge i { font-size: 1.3rem; }
.uk-footer-app-text { display: flex; flex-direction: column; line-height: 1.1; }
.uk-footer-app-small { font-size: 0.6rem; color: #94a3b8; }
.uk-footer-app-big { font-size: 0.8rem; font-weight: 700; }
.uk-footer-col { display: flex; flex-direction: column; gap: 0.75rem; }
.uk-footer-col-title {
font-size: 0.72rem; font-weight: 800; color: #fff;
text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem;
}
.uk-footer-link {
font-size: 0.82rem; color: #94a3b8; text-decoration: none;
transition: color 0.15s; width: fit-content;
}
.uk-footer-link:hover { color: #fff; }
.uk-footer-trust {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 1.5rem; max-width: 1100px; margin: 0 auto;
padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.uk-footer-trust-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.uk-footer-trust-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.72rem; font-weight: 700; color: #cbd5e1;
background: rgba(255,255,255,0.06); padding: 0.35rem 0.75rem;
border-radius: 999px;
}
.uk-footer-trust-badge i { color: #4ade80; font-size: 0.75rem; }
.uk-footer-socials { display: flex; gap: 0.5rem; }
.uk-footer-social {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.06); color: #cbd5e1;
font-size: 0.85rem; text-decoration: none; transition: all 0.15s;
}
.uk-footer-social:hover { background: #1e3a8a; color: #fff; transform: translateY(-2px); }
.uk-footer-bottom {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 1rem; max-width: 1100px; margin: 0 auto;
padding-top: 1.5rem;
}
.uk-footer-copy { font-size: 0.75rem; color: #64748b; }
.uk-footer-legal { display: flex; gap: 1.25rem; }
.uk-footer-legal-link {
font-size: 0.75rem; color: #94a3b8;
text-decoration: none; transition: color 0.15s;
}
.uk-footer-legal-link:hover { color: #fff; }
@media (max-width: 860px) {
.uk-footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
.uk-footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.uk-footer-top { grid-template-columns: 1fr; }
.uk-footer-bottom { flex-direction: column; align-items: flex-start; }
}
</style>
Compact Mega Footer — 3 Columns
<footer class="uk-footer uk-footer-compact">
<div class="uk-footer-top uk-footer-top-compact">
<div class="uk-footer-brand-col">
<div class="uk-footer-brand"><i class="fas fa-leaf"></i><span>Mint</span></div>
<p class="uk-footer-brand-desc">A calmer way to manage your team's work...</p>
</div>
<div class="uk-footer-col">
<div class="uk-footer-col-title">Quick Links</div>
<a href="#" class="uk-footer-link">Home</a>
<a href="#" class="uk-footer-link">Features</a>
<a href="#" class="uk-footer-link">Pricing</a>
<a href="#" class="uk-footer-link">Blog</a>
</div>
<div class="uk-footer-col">
<div class="uk-footer-col-title">Contact</div>
<a href="#" class="uk-footer-link"><i class="fas fa-envelope"></i> [email protected]</a>
<a href="#" class="uk-footer-link"><i class="fas fa-phone"></i> +1 (555) 123-4567</a>
<a href="#" class="uk-footer-link"><i class="fas fa-location-dot"></i> San Francisco, CA</a>
<a href="#" class="uk-footer-link"><i class="fas fa-clock"></i> Mon–Fri, 9am–6pm</a>
</div>
</div>
<div class="uk-footer-bottom">
<span class="uk-footer-copy">© 2025 Mint Labs. All rights reserved.</span>
<div class="uk-footer-socials">
<a href="#" class="uk-footer-social"><i class="fab fa-twitter"></i></a>
<a href="#" class="uk-footer-social"><i class="fab fa-instagram"></i></a>
<a href="#" class="uk-footer-social"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</footer>
<style>
.uk-footer {
background: #0b1b2f; color: #cbd5e1; padding: 3.5rem 2rem 1.5rem;
}
.uk-footer-compact { padding: 2.5rem 2rem 1.5rem; }
.uk-footer-top {
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 2.5rem; max-width: 1100px; margin: 0 auto;
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.uk-footer-top-compact {
grid-template-columns: 2fr 1fr 1.2fr;
padding-bottom: 1.5rem;
}
.uk-footer-brand {
display: flex; align-items: center; gap: 0.6rem;
font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 1rem;
}
.uk-footer-brand i { color: #4ade80; font-size: 1.25rem; }
.uk-footer-brand-desc {
font-size: 0.82rem; line-height: 1.7;
color: #94a3b8; max-width: 320px;
}
.uk-footer-col { display: flex; flex-direction: column; gap: 0.75rem; }
.uk-footer-col-title {
font-size: 0.72rem; font-weight: 800; color: #fff;
text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem;
}
.uk-footer-link {
font-size: 0.82rem; color: #94a3b8; text-decoration: none;
transition: color 0.15s; display: inline-flex;
align-items: center; gap: 0.5rem; width: fit-content;
}
.uk-footer-link:hover { color: #fff; }
.uk-footer-link i { font-size: 0.75rem; color: #64748b; width: 14px; }
.uk-footer-socials { display: flex; gap: 0.5rem; }
.uk-footer-social {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.06); color: #cbd5e1;
font-size: 0.85rem; text-decoration: none; transition: all 0.15s;
}
.uk-footer-social:hover { background: #1e3a8a; color: #fff; transform: translateY(-2px); }
.uk-footer-bottom {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 1rem; max-width: 1100px; margin: 0 auto;
padding-top: 1.5rem;
}
.uk-footer-copy { font-size: 0.75rem; color: #64748b; }
@media (max-width: 860px) {
.uk-footer-top,
.uk-footer-top-compact { grid-template-columns: 1fr 1fr; gap: 2rem; }
.uk-footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.uk-footer-top,
.uk-footer-top-compact { grid-template-columns: 1fr; }
.uk-footer-bottom { flex-direction: column; align-items: flex-start; }
}
</style>
Footer with Newsletter Band
<footer class="uk-footer uk-footer-with-cta">
<!-- Newsletter band -->
<div class="uk-footer-newsletter">
<div class="uk-footer-newsletter-inner">
<div class="uk-footer-newsletter-text">
<h3 class="uk-footer-newsletter-title">Stay ahead of the curve</h3>
<p class="uk-footer-newsletter-desc">Get product updates, tutorials, and design tips...</p>
</div>
<form class="uk-footer-newsletter-form">
<div class="uk-footer-newsletter-input-wrap">
<i class="fas fa-envelope"></i>
<input type="email" class="uk-footer-newsletter-input" placeholder="Enter your email">
</div>
<button type="submit" class="uk-footer-newsletter-btn">
Subscribe <i class="fas fa-arrow-right"></i>
</button>
</form>
</div>
</div>
<div class="uk-footer-top">
<div class="uk-footer-brand-col">
<div class="uk-footer-brand"><i class="fas fa-cube"></i><span>Nexus</span></div>
<p class="uk-footer-brand-desc">Design faster, ship with confidence...</p>
<div class="uk-footer-socials">
<a href="#" class="uk-footer-social"><i class="fab fa-twitter"></i></a>
<a href="#" class="uk-footer-social"><i class="fab fa-github"></i></a>
<a href="#" class="uk-footer-social"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="uk-footer-social"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="uk-footer-col">
<div class="uk-footer-col-title">Product</div>
<a href="#" class="uk-footer-link">Components</a>
<a href="#" class="uk-footer-link">Templates</a>
<a href="#" class="uk-footer-link">Changelog</a>
<a href="#" class="uk-footer-link">Pricing</a>
</div>
<div class="uk-footer-col">
<div class="uk-footer-col-title">Company</div>
<a href="#" class="uk-footer-link">About</a>
<a href="#" class="uk-footer-link">Blog</a>
<a href="#" class="uk-footer-link">Careers</a>
<a href="#" class="uk-footer-link">Contact</a>
</div>
<div class="uk-footer-col">
<div class="uk-footer-col-title">Resources</div>
<a href="#" class="uk-footer-link">Docs</a>
<a href="#" class="uk-footer-link">API</a>
<a href="#" class="uk-footer-link">Guides</a>
<a href="#" class="uk-footer-link">Status</a>
</div>
</div>
<div class="uk-footer-bottom">
<span class="uk-footer-copy">© 2025 Nexus Inc. All rights reserved.</span>
<div class="uk-footer-legal">
<a href="#" class="uk-footer-legal-link">Privacy</a>
<a href="#" class="uk-footer-legal-link">Terms</a>
<a href="#" class="uk-footer-legal-link">Cookies</a>
</div>
</div>
</footer>
<style>
.uk-footer {
background: #0b1b2f; color: #cbd5e1; padding: 0 2rem 1.5rem;
}
.uk-footer-newsletter {
max-width: 1100px; margin: 0 auto;
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
border-radius: 1rem;
padding: 2rem 2.5rem;
margin-bottom: 3rem;
transform: translateY(-2.5rem);
box-shadow: 0 16px 40px rgba(30,58,138,0.4);
}
.uk-footer-newsletter-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 2rem; flex-wrap: wrap;
}
.uk-footer-newsletter-text { flex: 1; min-width: 240px; }
.uk-footer-newsletter-title {
font-size: 1.35rem; font-weight: 800; color: #fff;
margin: 0 0 0.35rem;
}
.uk-footer-newsletter-desc {
font-size: 0.85rem; color: #bfdbfe; margin: 0; line-height: 1.5;
}
.uk-footer-newsletter-form {
display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.uk-footer-newsletter-input-wrap {
position: relative; display: flex; align-items: center;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 0.6rem;
min-width: 240px;
}
.uk-footer-newsletter-input-wrap:focus-within {
border-color: #fff; background: rgba(255,255,255,0.18);
}
.uk-footer-newsletter-input-wrap i {
position: absolute; left: 0.85rem; color: #bfdbfe; font-size: 0.85rem;
}
.uk-footer-newsletter-input {
width: 100%; border: none; outline: none; background: transparent;
padding: 0.7rem 0.85rem 0.7rem 2.3rem;
font-size: 0.85rem; color: #fff; font-family: inherit;
}
.uk-footer-newsletter-input::placeholder { color: #93c5fd; }
.uk-footer-newsletter-btn {
display: inline-flex; align-items: center; gap: 0.5rem;
background: #fff; color: #1e3a8a; border: none;
border-radius: 0.6rem; padding: 0.7rem 1.25rem;
font-size: 0.85rem; font-weight: 700; cursor: pointer;
transition: all 0.15s; font-family: inherit;
white-space: nowrap;
}
.uk-footer-newsletter-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.uk-footer-newsletter-btn i {
font-size: 0.7rem; transition: transform 0.15s;
}
.uk-footer-newsletter-btn:hover i { transform: translateX(3px); }
.uk-footer-top {
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 2.5rem; max-width: 1100px; margin: 0 auto;
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.uk-footer-brand {
display: flex; align-items: center; gap: 0.6rem;
font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 1rem;
}
.uk-footer-brand i { color: #60a5fa; font-size: 1.25rem; }
.uk-footer-brand-desc {
font-size: 0.82rem; line-height: 1.7; color: #94a3b8;
margin-bottom: 1.5rem; max-width: 300px;
}
.uk-footer-socials { display: flex; gap: 0.5rem; }
.uk-footer-social {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.06); color: #cbd5e1;
font-size: 0.85rem; text-decoration: none; transition: all 0.15s;
}
.uk-footer-social:hover {
background: #1e3a8a; color: #fff; transform: translateY(-2px);
}
.uk-footer-col { display: flex; flex-direction: column; gap: 0.75rem; }
.uk-footer-col-title {
font-size: 0.72rem; font-weight: 800; color: #fff;
text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem;
}
.uk-footer-link {
font-size: 0.82rem; color: #94a3b8; text-decoration: none;
transition: color 0.15s; width: fit-content;
}
.uk-footer-link:hover { color: #fff; }
.uk-footer-bottom {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 1rem; max-width: 1100px; margin: 0 auto;
padding-top: 1.5rem;
}
.uk-footer-copy { font-size: 0.75rem; color: #64748b; }
.uk-footer-legal { display: flex; gap: 1.25rem; }
.uk-footer-legal-link {
font-size: 0.75rem; color: #94a3b8;
text-decoration: none; transition: color 0.15s;
}
.uk-footer-legal-link:hover { color: #fff; }
@media (max-width: 860px) {
.uk-footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
.uk-footer-brand-col { grid-column: 1 / -1; }
.uk-footer-newsletter { padding: 1.75rem 1.5rem; }
}
@media (max-width: 480px) {
.uk-footer-top { grid-template-columns: 1fr; }
.uk-footer-bottom { flex-direction: column; align-items: flex-start; }
.uk-footer-newsletter-input-wrap { min-width: 100%; }
.uk-footer-newsletter-btn { width: 100%; justify-content: center; }
}
</style>