Browse Blocks
Footer
Responsive page endings, from simple links to grouped navigation.
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="2022">
2022–2026
</span>
Layout UI
</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>export default function Example() { return (<footer className="marketing-block marketing-footer cluster justify-between gap-md">
<p className="marketing-footer-copyright muted m-0">© <span data-current-year data-start-year="2022">2022–2026</span> Layout UI</p>
<nav className="cluster gap-sm" aria-label="Social media">
<a className="btn ghost btn-icon" href="https://www.instagram.com/" aria-label="Instagram">
<span className="icon" data-icon="brand-instagram" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://x.com/" aria-label="X">
<span className="icon" data-icon="brand-x" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.reddit.com/" aria-label="Reddit">
<span className="icon" data-icon="brand-reddit" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.linkedin.com/" aria-label="LinkedIn">
<span className="icon" data-icon="brand-linkedin" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://github.com/" aria-label="GitHub">
<span className="icon" data-icon="brand-github" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.tiktok.com/" aria-label="TikTok">
<span className="icon" data-icon="brand-tiktok" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.youtube.com/" aria-label="YouTube">
<span className="icon" data-icon="brand-youtube" aria-hidden="true">
</span>
</a>
</nav>
</footer>); }
export default function Example() { return (<footer className="marketing-block marketing-footer cluster justify-between gap-md">
<p className="marketing-footer-copyright muted m-0">© <span data-current-year data-start-year="2022">2022–2026</span> Layout UI</p>
<nav className="cluster gap-sm" aria-label="Social media">
<a className="btn ghost btn-icon" href="https://www.instagram.com/" aria-label="Instagram">
<span className="icon" data-icon="brand-instagram" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://x.com/" aria-label="X">
<span className="icon" data-icon="brand-x" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.reddit.com/" aria-label="Reddit">
<span className="icon" data-icon="brand-reddit" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.linkedin.com/" aria-label="LinkedIn">
<span className="icon" data-icon="brand-linkedin" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://github.com/" aria-label="GitHub">
<span className="icon" data-icon="brand-github" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.tiktok.com/" aria-label="TikTok">
<span className="icon" data-icon="brand-tiktok" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.youtube.com/" aria-label="YouTube">
<span className="icon" data-icon="brand-youtube" aria-hidden="true">
</span>
</a>
</nav>
</footer>); }
<template>
<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="2022">2022–2026</span> Layout UI</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>
</template>
<template>
<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="2022">2022–2026</span> Layout UI</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>
</template>
import {Component} from '@angular/core';
@Component({selector:'app-example',standalone:true,template: `<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="2022">2022–2026</span> Layout UI</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>`})
export class ExampleComponent {}
<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="2022">2022–2026</span> Layout UI</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>
<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="2022">2022–2026</span> Layout UI</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="2022">
2022–2026
</span>
Layout UI
</p>
</footer>export default function Example() { return (<footer className="marketing-block marketing-footer stack items-center text-center gap-lg">
<a className="marketing-footer-brand wordmark" href="/" aria-label="Layout UI home">Layout<span>UI</span>
</a>
<p className="muted max-w-lg">A thoughtful foundation for your next idea.</p>
<nav className="cluster justify-center gap-md" aria-label="Footer">
<a className="link-underline link-animated" href="/components">Components</a>
<a className="link-underline link-animated" href="/css">CSS</a>
<a className="link-underline link-animated" href="/icons">Icons</a>
<a className="link-underline link-animated" href="/docs/install">Get Started</a>
</nav>
<nav className="cluster gap-sm" aria-label="Social media">
<a className="btn ghost btn-icon" href="https://www.instagram.com/" aria-label="Instagram">
<span className="icon" data-icon="brand-instagram" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://x.com/" aria-label="X">
<span className="icon" data-icon="brand-x" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.reddit.com/" aria-label="Reddit">
<span className="icon" data-icon="brand-reddit" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.linkedin.com/" aria-label="LinkedIn">
<span className="icon" data-icon="brand-linkedin" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://github.com/" aria-label="GitHub">
<span className="icon" data-icon="brand-github" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.tiktok.com/" aria-label="TikTok">
<span className="icon" data-icon="brand-tiktok" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.youtube.com/" aria-label="YouTube">
<span className="icon" data-icon="brand-youtube" aria-hidden="true">
</span>
</a>
</nav>
<p className="marketing-footer-copyright muted m-0">© <span data-current-year data-start-year="2022">2022–2026</span> Layout UI</p>
</footer>); }
export default function Example() { return (<footer className="marketing-block marketing-footer stack items-center text-center gap-lg">
<a className="marketing-footer-brand wordmark" href="/" aria-label="Layout UI home">Layout<span>UI</span>
</a>
<p className="muted max-w-lg">A thoughtful foundation for your next idea.</p>
<nav className="cluster justify-center gap-md" aria-label="Footer">
<a className="link-underline link-animated" href="/components">Components</a>
<a className="link-underline link-animated" href="/css">CSS</a>
<a className="link-underline link-animated" href="/icons">Icons</a>
<a className="link-underline link-animated" href="/docs/install">Get Started</a>
</nav>
<nav className="cluster gap-sm" aria-label="Social media">
<a className="btn ghost btn-icon" href="https://www.instagram.com/" aria-label="Instagram">
<span className="icon" data-icon="brand-instagram" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://x.com/" aria-label="X">
<span className="icon" data-icon="brand-x" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.reddit.com/" aria-label="Reddit">
<span className="icon" data-icon="brand-reddit" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.linkedin.com/" aria-label="LinkedIn">
<span className="icon" data-icon="brand-linkedin" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://github.com/" aria-label="GitHub">
<span className="icon" data-icon="brand-github" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.tiktok.com/" aria-label="TikTok">
<span className="icon" data-icon="brand-tiktok" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.youtube.com/" aria-label="YouTube">
<span className="icon" data-icon="brand-youtube" aria-hidden="true">
</span>
</a>
</nav>
<p className="marketing-footer-copyright muted m-0">© <span data-current-year data-start-year="2022">2022–2026</span> Layout UI</p>
</footer>); }
<template>
<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="2022">2022–2026</span> Layout UI</p>
</footer>
</template>
<template>
<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="2022">2022–2026</span> Layout UI</p>
</footer>
</template>
import {Component} from '@angular/core';
@Component({selector:'app-example',standalone:true,template: `<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="2022">2022–2026</span> Layout UI</p>
</footer>`})
export class ExampleComponent {}
<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="2022">2022–2026</span> Layout UI</p>
</footer>
<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="2022">2022–2026</span> Layout UI</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">
Integrations
</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="/templates">
Templates
</a>
<a class="link-underline link-animated" href="/create">
Create
</a>
</nav>
<nav class="stack" aria-label="Compare links">
<strong>
Compare
</strong>
<a class="link-underline link-animated" href="/compare">
Compare Approaches
</a>
<a class="link-underline link-animated" href="/compare/html">
Layout UI
&
HTML
</a>
<a class="link-underline link-animated" href="/compare/react">
Layout UI
&
React
</a>
<a class="link-underline link-animated" href="/compare/vue">
Layout UI
&
Vue
</a>
<a class="link-underline link-animated" href="/compare/nextjs">
Layout UI
&
Next.js
</a>
<a class="link-underline link-animated" href="/compare/nuxt">
Layout UI
&
Nuxt
</a>
<a class="link-underline link-animated" href="/compare/angular">
Layout UI
&
Angular
</a>
<a class="link-underline link-animated" href="/compare/svelte">
Layout UI
&
Svelte
</a>
<a class="link-underline link-animated" href="/compare/astro">
Layout UI
&
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="2022">
2022–2026
</span>
Layout UI
</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>export default function Example() { return (<footer className="marketing-block marketing-footer marketing-footer-expanded stack gap-xl">
<div className="container footer-grid">
<div className="stack">
<a className="wordmark" href="/" aria-label="Layout UI home">Layout<span>UI</span>
</a>
<p>Design with AI. Build like a pro.</p>
</div>
<nav className="stack" aria-label="Learn links">
<strong>Learn</strong>
<a className="link-underline link-animated" href="/docs">Get Started</a>
<a className="link-underline link-animated" href="/docs/themes">Themes</a>
<a className="link-underline link-animated" href="/docs/integrations">Integrations</a>
<a className="link-underline link-animated" href="/docs/ai">AI Guide</a>
</nav>
<nav className="stack" aria-label="Build links">
<strong>Build</strong>
<a className="link-underline link-animated" href="/css">CSS</a>
<a className="link-underline link-animated" href="/icons">Icons</a>
<a className="link-underline link-animated" href="/components">Components</a>
<a className="link-underline link-animated" href="/blocks">Blocks</a>
<a className="link-underline link-animated" href="/templates">Templates</a>
<a className="link-underline link-animated" href="/create">Create</a>
</nav>
<nav className="stack" aria-label="Compare links">
<strong>Compare</strong>
<a className="link-underline link-animated" href="/compare">Compare Approaches</a>
<a className="link-underline link-animated" href="/compare/html">Layout UI & HTML</a>
<a className="link-underline link-animated" href="/compare/react">Layout UI & React</a>
<a className="link-underline link-animated" href="/compare/vue">Layout UI & Vue</a>
<a className="link-underline link-animated" href="/compare/nextjs">Layout UI & Next.js</a>
<a className="link-underline link-animated" href="/compare/nuxt">Layout UI & Nuxt</a>
<a className="link-underline link-animated" href="/compare/angular">Layout UI & Angular</a>
<a className="link-underline link-animated" href="/compare/svelte">Layout UI & Svelte</a>
<a className="link-underline link-animated" href="/compare/astro">Layout UI & Astro</a>
</nav>
</div>
<div className="cluster justify-between gap-md">
<p className="marketing-footer-copyright muted m-0">© <span data-current-year data-start-year="2022">2022–2026</span> Layout UI</p>
<nav className="cluster gap-sm" aria-label="Social media">
<a className="btn ghost btn-icon" href="https://www.instagram.com/" aria-label="Instagram">
<span className="icon" data-icon="brand-instagram" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://x.com/" aria-label="X">
<span className="icon" data-icon="brand-x" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.reddit.com/" aria-label="Reddit">
<span className="icon" data-icon="brand-reddit" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.linkedin.com/" aria-label="LinkedIn">
<span className="icon" data-icon="brand-linkedin" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://github.com/" aria-label="GitHub">
<span className="icon" data-icon="brand-github" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.tiktok.com/" aria-label="TikTok">
<span className="icon" data-icon="brand-tiktok" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.youtube.com/" aria-label="YouTube">
<span className="icon" data-icon="brand-youtube" aria-hidden="true">
</span>
</a>
</nav>
</div>
</footer>); }
export default function Example() { return (<footer className="marketing-block marketing-footer marketing-footer-expanded stack gap-xl">
<div className="container footer-grid">
<div className="stack">
<a className="wordmark" href="/" aria-label="Layout UI home">Layout<span>UI</span>
</a>
<p>Design with AI. Build like a pro.</p>
</div>
<nav className="stack" aria-label="Learn links">
<strong>Learn</strong>
<a className="link-underline link-animated" href="/docs">Get Started</a>
<a className="link-underline link-animated" href="/docs/themes">Themes</a>
<a className="link-underline link-animated" href="/docs/integrations">Integrations</a>
<a className="link-underline link-animated" href="/docs/ai">AI Guide</a>
</nav>
<nav className="stack" aria-label="Build links">
<strong>Build</strong>
<a className="link-underline link-animated" href="/css">CSS</a>
<a className="link-underline link-animated" href="/icons">Icons</a>
<a className="link-underline link-animated" href="/components">Components</a>
<a className="link-underline link-animated" href="/blocks">Blocks</a>
<a className="link-underline link-animated" href="/templates">Templates</a>
<a className="link-underline link-animated" href="/create">Create</a>
</nav>
<nav className="stack" aria-label="Compare links">
<strong>Compare</strong>
<a className="link-underline link-animated" href="/compare">Compare Approaches</a>
<a className="link-underline link-animated" href="/compare/html">Layout UI & HTML</a>
<a className="link-underline link-animated" href="/compare/react">Layout UI & React</a>
<a className="link-underline link-animated" href="/compare/vue">Layout UI & Vue</a>
<a className="link-underline link-animated" href="/compare/nextjs">Layout UI & Next.js</a>
<a className="link-underline link-animated" href="/compare/nuxt">Layout UI & Nuxt</a>
<a className="link-underline link-animated" href="/compare/angular">Layout UI & Angular</a>
<a className="link-underline link-animated" href="/compare/svelte">Layout UI & Svelte</a>
<a className="link-underline link-animated" href="/compare/astro">Layout UI & Astro</a>
</nav>
</div>
<div className="cluster justify-between gap-md">
<p className="marketing-footer-copyright muted m-0">© <span data-current-year data-start-year="2022">2022–2026</span> Layout UI</p>
<nav className="cluster gap-sm" aria-label="Social media">
<a className="btn ghost btn-icon" href="https://www.instagram.com/" aria-label="Instagram">
<span className="icon" data-icon="brand-instagram" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://x.com/" aria-label="X">
<span className="icon" data-icon="brand-x" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.reddit.com/" aria-label="Reddit">
<span className="icon" data-icon="brand-reddit" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.linkedin.com/" aria-label="LinkedIn">
<span className="icon" data-icon="brand-linkedin" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://github.com/" aria-label="GitHub">
<span className="icon" data-icon="brand-github" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.tiktok.com/" aria-label="TikTok">
<span className="icon" data-icon="brand-tiktok" aria-hidden="true">
</span>
</a>
<a className="btn ghost btn-icon" href="https://www.youtube.com/" aria-label="YouTube">
<span className="icon" data-icon="brand-youtube" aria-hidden="true">
</span>
</a>
</nav>
</div>
</footer>); }
<template>
<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">Integrations</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="/templates">Templates</a>
<a class="link-underline link-animated" href="/create">Create</a>
</nav>
<nav class="stack" aria-label="Compare links">
<strong>Compare</strong>
<a class="link-underline link-animated" href="/compare">Compare Approaches</a>
<a class="link-underline link-animated" href="/compare/html">Layout UI & HTML</a>
<a class="link-underline link-animated" href="/compare/react">Layout UI & React</a>
<a class="link-underline link-animated" href="/compare/vue">Layout UI & Vue</a>
<a class="link-underline link-animated" href="/compare/nextjs">Layout UI & Next.js</a>
<a class="link-underline link-animated" href="/compare/nuxt">Layout UI & Nuxt</a>
<a class="link-underline link-animated" href="/compare/angular">Layout UI & Angular</a>
<a class="link-underline link-animated" href="/compare/svelte">Layout UI & Svelte</a>
<a class="link-underline link-animated" href="/compare/astro">Layout UI & 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="2022">2022–2026</span> Layout UI</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>
</template>
<template>
<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">Integrations</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="/templates">Templates</a>
<a class="link-underline link-animated" href="/create">Create</a>
</nav>
<nav class="stack" aria-label="Compare links">
<strong>Compare</strong>
<a class="link-underline link-animated" href="/compare">Compare Approaches</a>
<a class="link-underline link-animated" href="/compare/html">Layout UI & HTML</a>
<a class="link-underline link-animated" href="/compare/react">Layout UI & React</a>
<a class="link-underline link-animated" href="/compare/vue">Layout UI & Vue</a>
<a class="link-underline link-animated" href="/compare/nextjs">Layout UI & Next.js</a>
<a class="link-underline link-animated" href="/compare/nuxt">Layout UI & Nuxt</a>
<a class="link-underline link-animated" href="/compare/angular">Layout UI & Angular</a>
<a class="link-underline link-animated" href="/compare/svelte">Layout UI & Svelte</a>
<a class="link-underline link-animated" href="/compare/astro">Layout UI & 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="2022">2022–2026</span> Layout UI</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>
</template>
import {Component} from '@angular/core';
@Component({selector:'app-example',standalone:true,template: `<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">Integrations</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="/templates">Templates</a>
<a class="link-underline link-animated" href="/create">Create</a>
</nav>
<nav class="stack" aria-label="Compare links">
<strong>Compare</strong>
<a class="link-underline link-animated" href="/compare">Compare Approaches</a>
<a class="link-underline link-animated" href="/compare/html">Layout UI & HTML</a>
<a class="link-underline link-animated" href="/compare/react">Layout UI & React</a>
<a class="link-underline link-animated" href="/compare/vue">Layout UI & Vue</a>
<a class="link-underline link-animated" href="/compare/nextjs">Layout UI & Next.js</a>
<a class="link-underline link-animated" href="/compare/nuxt">Layout UI & Nuxt</a>
<a class="link-underline link-animated" href="/compare/angular">Layout UI & Angular</a>
<a class="link-underline link-animated" href="/compare/svelte">Layout UI & Svelte</a>
<a class="link-underline link-animated" href="/compare/astro">Layout UI & 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="2022">2022–2026</span> Layout UI</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>`})
export class ExampleComponent {}
<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">Integrations</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="/templates">Templates</a>
<a class="link-underline link-animated" href="/create">Create</a>
</nav>
<nav class="stack" aria-label="Compare links">
<strong>Compare</strong>
<a class="link-underline link-animated" href="/compare">Compare Approaches</a>
<a class="link-underline link-animated" href="/compare/html">Layout UI & HTML</a>
<a class="link-underline link-animated" href="/compare/react">Layout UI & React</a>
<a class="link-underline link-animated" href="/compare/vue">Layout UI & Vue</a>
<a class="link-underline link-animated" href="/compare/nextjs">Layout UI & Next.js</a>
<a class="link-underline link-animated" href="/compare/nuxt">Layout UI & Nuxt</a>
<a class="link-underline link-animated" href="/compare/angular">Layout UI & Angular</a>
<a class="link-underline link-animated" href="/compare/svelte">Layout UI & Svelte</a>
<a class="link-underline link-animated" href="/compare/astro">Layout UI & 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="2022">2022–2026</span> Layout UI</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>
<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">Integrations</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="/templates">Templates</a>
<a class="link-underline link-animated" href="/create">Create</a>
</nav>
<nav class="stack" aria-label="Compare links">
<strong>Compare</strong>
<a class="link-underline link-animated" href="/compare">Compare Approaches</a>
<a class="link-underline link-animated" href="/compare/html">Layout UI & HTML</a>
<a class="link-underline link-animated" href="/compare/react">Layout UI & React</a>
<a class="link-underline link-animated" href="/compare/vue">Layout UI & Vue</a>
<a class="link-underline link-animated" href="/compare/nextjs">Layout UI & Next.js</a>
<a class="link-underline link-animated" href="/compare/nuxt">Layout UI & Nuxt</a>
<a class="link-underline link-animated" href="/compare/angular">Layout UI & Angular</a>
<a class="link-underline link-animated" href="/compare/svelte">Layout UI & Svelte</a>
<a class="link-underline link-animated" href="/compare/astro">Layout UI & 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="2022">2022–2026</span> Layout UI</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>