Browse Blocks
Footers
Close the page with useful links.
Basic
Copyright and social links in a compact row that wraps on smaller screens.
View Code
<footer class="marketing-block marketing-footer cluster justify-between gap-md">
<p class="marketing-footer-copyright muted m-0">
©
<span data-current-year data-start-year="2013">
2013–2026
</span>
<a href="https://vividmachine.com/">
Vivid Machine
</a>
</p>
<nav class="cluster gap-sm" aria-label="Social media">
<a
class="btn ghost btn-icon"
href="https://www.instagram.com/"
aria-label="Instagram"
>
<span class="icon" data-icon="brand-instagram" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://x.com/" aria-label="X">
<span class="icon" data-icon="brand-x" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://www.reddit.com/" aria-label="Reddit">
<span class="icon" data-icon="brand-reddit" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://www.linkedin.com/" aria-label="LinkedIn">
<span class="icon" data-icon="brand-linkedin" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://github.com/" aria-label="GitHub">
<span class="icon" data-icon="brand-github" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://www.tiktok.com/" aria-label="TikTok">
<span class="icon" data-icon="brand-tiktok" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://www.youtube.com/" aria-label="YouTube">
<span class="icon" data-icon="brand-youtube" aria-hidden="true">
</span>
</a>
</nav>
</footer>Centered
A quiet, centered ending for a focused page. Social links use example platform destinations; replace them with your own profiles.
View Code
<footer class="marketing-block marketing-footer stack items-center text-center gap-lg">
<a class="marketing-footer-brand wordmark" href="/" aria-label="Layout UI home">
Layout
<span>
UI
</span>
</a>
<p class="muted max-w-lg">
A thoughtful foundation for your next idea.
</p>
<nav class="cluster justify-center gap-md" aria-label="Footer">
<a class="link-underline link-animated" href="/components">
Components
</a>
<a class="link-underline link-animated" href="/css">
CSS
</a>
<a class="link-underline link-animated" href="/icons">
Icons
</a>
<a class="link-underline link-animated" href="/docs/install">
Get Started
</a>
</nav>
<nav class="cluster gap-sm" aria-label="Social media">
<a
class="btn ghost btn-icon"
href="https://www.instagram.com/"
aria-label="Instagram"
>
<span class="icon" data-icon="brand-instagram" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://x.com/" aria-label="X">
<span class="icon" data-icon="brand-x" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://www.reddit.com/" aria-label="Reddit">
<span class="icon" data-icon="brand-reddit" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://www.linkedin.com/" aria-label="LinkedIn">
<span class="icon" data-icon="brand-linkedin" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://github.com/" aria-label="GitHub">
<span class="icon" data-icon="brand-github" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://www.tiktok.com/" aria-label="TikTok">
<span class="icon" data-icon="brand-tiktok" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://www.youtube.com/" aria-label="YouTube">
<span class="icon" data-icon="brand-youtube" aria-hidden="true">
</span>
</a>
</nav>
<p class="marketing-footer-copyright muted m-0">
©
<span data-current-year data-start-year="2013">
2013–2026
</span>
<a href="https://vividmachine.com/">
Vivid Machine
</a>
</p>
</footer>Expanded
The Layout UI site footer, with compact text and generous navigation groups.
View Code
<footer class="marketing-block marketing-footer marketing-footer-expanded stack gap-xl">
<div class="container footer-grid">
<div class="stack">
<a class="wordmark" href="/" aria-label="Layout UI home">
Layout
<span>
UI
</span>
</a>
<p>
Design with AI. Build like a pro.
</p>
</div>
<nav class="stack" aria-label="Learn links">
<strong>
Learn
</strong>
<a class="link-underline link-animated" href="/docs">
Get Started
</a>
<a class="link-underline link-animated" href="/docs/themes">
Themes
</a>
<a class="link-underline link-animated" href="/docs/integrations">
Integration Guide
</a>
<a class="link-underline link-animated" href="/docs/ai">
AI Guide
</a>
</nav>
<nav class="stack" aria-label="Build links">
<strong>
Build
</strong>
<a class="link-underline link-animated" href="/css">
CSS
</a>
<a class="link-underline link-animated" href="/icons">
Icons
</a>
<a class="link-underline link-animated" href="/components">
Components
</a>
<a class="link-underline link-animated" href="/blocks">
Blocks
</a>
<a class="link-underline link-animated" href="/create">
Create
</a>
</nav>
<nav class="stack" aria-label="Integration links">
<strong>
Integrations
</strong>
<a class="link-underline link-animated" href="/integrations">
All Integrations
</a>
<a class="link-underline link-animated" href="/integrations/html">
HTML
</a>
<a class="link-underline link-animated" href="/integrations/react">
React
</a>
<a class="link-underline link-animated" href="/integrations/vue">
Vue
</a>
<a class="link-underline link-animated" href="/integrations/nextjs">
Next.js
</a>
<a class="link-underline link-animated" href="/integrations/nuxt">
Nuxt
</a>
<a class="link-underline link-animated" href="/integrations/angular">
Angular
</a>
<a class="link-underline link-animated" href="/integrations/svelte">
Svelte
</a>
<a class="link-underline link-animated" href="/integrations/astro">
Astro
</a>
</nav>
</div>
<div class="cluster justify-between gap-md">
<p class="marketing-footer-copyright muted m-0">
©
<span data-current-year data-start-year="2013">
2013–2026
</span>
<a href="https://vividmachine.com/">
Vivid Machine
</a>
</p>
<nav class="cluster gap-sm" aria-label="Social media">
<a
class="btn ghost btn-icon"
href="https://www.instagram.com/"
aria-label="Instagram"
>
<span class="icon" data-icon="brand-instagram" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://x.com/" aria-label="X">
<span class="icon" data-icon="brand-x" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://www.reddit.com/" aria-label="Reddit">
<span class="icon" data-icon="brand-reddit" aria-hidden="true">
</span>
</a>
<a
class="btn ghost btn-icon"
href="https://www.linkedin.com/"
aria-label="LinkedIn"
>
<span class="icon" data-icon="brand-linkedin" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://github.com/" aria-label="GitHub">
<span class="icon" data-icon="brand-github" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://www.tiktok.com/" aria-label="TikTok">
<span class="icon" data-icon="brand-tiktok" aria-hidden="true">
</span>
</a>
<a class="btn ghost btn-icon" href="https://www.youtube.com/" aria-label="YouTube">
<span class="icon" data-icon="brand-youtube" aria-hidden="true">
</span>
</a>
</nav>
</div>
</footer>