Brand Footer

A brand footer gives the logo and a short tagline a wide column of their own, and pushes the link groups to the right. Below sits the same subfooter as the Classic Footer, so the copyright and social icons stay in the same place across the footer family.

Preview

<footer class="divide-y" style="--flow: 1.5rem; border-color: color-mix(in oklab, var(--root-bg) 75%, var(--root-fg))">
	<div class="grid-cols gap" style="--md_grid-cols: 5; --gap: 2rem 1.5rem; --py: 0 2rem">
		<div class="flow" style="--flow: 0.75rem; --md_col: span 2">
			<a href="#" class="lead inline-flex gap-sm align" style="text-decoration: none">
				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--brand)"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
				<span>Acme</span>
			</a>
			<p>Tools for small teams that want to ship good work without the overhead.</p>
		</div>
		<nav aria-label="Footer" class="auto-grid gap" style="--max-col-size: max(8rem, (100% - 3rem) / 3); --md_col: span 3; --gap: 2rem 1.5rem">
			<div class="flow" style="--flow: 0.75rem">
				<h2 style="--h-size: 1rem">Product</h2>
				<ul style="--list-flow: 0.5rem">
					<li><a href="#">Features</a></li>
					<li><a href="#">Pricing</a></li>
					<li><a href="#">Changelog</a></li>
				</ul>
			</div>
			<div class="flow" style="--flow: 0.75rem">
				<h2 style="--h-size: 1rem">Resources</h2>
				<ul style="--list-flow: 0.5rem">
					<li><a href="#">Documentation</a></li>
					<li><a href="#">Guides</a></li>
					<li><a href="#">Blog</a></li>
				</ul>
			</div>
			<div class="flow" style="--flow: 0.75rem">
				<h2 style="--h-size: 1rem">Company</h2>
				<ul style="--list-flow: 0.5rem">
					<li><a href="#">About</a></li>
					<li><a href="#">Careers</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</nav>
	</div>
	<div class="flex-wrap gap align flow-none" style="--gap: 0.5rem 1.5rem">
		<p><small>&copy; 2026 Acme. All rights reserved.</small></p>
		<nav aria-label="Social">
			<ul class="flex gap" style="--gap: 1rem">
				<li><a href="#" class="flex" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg></a></li>
				<li><a href="#" class="flex" aria-label="Bluesky"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.335 5.144C4.681 3.945 2 3.017 2 5.97c0 .59.35 4.953.556 5.661C3.269 14.094 5.686 14.381 8 14c-4.045.665-4.889 3.208-2.667 5.41C6.363 20.428 7.246 21 8 21c2 0 3.134-2.769 3.5-3.5.333-.667.5-1.167.5-1.5 0 .333.167.833.5 1.5.366.731 1.5 3.5 3.5 3.5.754 0 1.637-.571 2.667-1.59C20.889 17.207 20.045 14.664 16 14c2.314.38 4.73.094 5.444-2.369.206-.708.556-5.072.556-5.661 0-2.953-2.68-2.025-4.335-.826C15.372 6.806 12.905 10.192 12 12c-.905-1.808-3.372-5.194-5.665-6.856z"/></svg></a></li>
				<li><a href="#" class="flex" aria-label="YouTube"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg></a></li>
				<li><a href="#" class="flex" aria-label="RSS feed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg></a></li>
			</ul>
		</nav>
	</div>
</footer>

Usage

The <footer> uses divide-y with a border color and a --flow, the same as the Classic Footer, to draw the line above the subfooter.
The top part is a grid-cols container with --md_grid-cols set to 5. The branding takes two columns with --md_col, and the <nav> takes the remaining three.
The nav is an auto-grid itself, so it fits as many link group columns as its own width allows, each at least --max-col-size wide. The groups wrap instead of overlapping when the space gets tight.
The logo is a link home with a lead class for the larger, bold name. The icon is colored with --brand and hidden from assistive technology, since the name is already the link text.
The subfooter is the same row as the Inline Footer, with icon links for the social profiles.

Anatomy

Part	Responsibility
`<footer>`	The container, and through `divide-y` the subfooter border.
Branding column	The logo link and the tagline, spanning two of five columns.
Footer `<nav>`	The link groups, spanning the remaining three columns.
Subfooter	The copyright and the social nav.

Accessibility

A <footer> that is a direct child of <body> is the contentinfo landmark.
Label each nav (“Footer”, “Social”) so it is not confused with the main navigation.
The logo link reads as the brand name. Keep the icon aria-hidden so it does not add a second, empty name.
Every social link needs an accessible name in aria-label, with the icon hidden.

Examples

Drop the branding column for the Classic Footer, or keep only the subfooter for the Inline Footer.

FAQ

How is the branding column made wider?

The outer grid has five columns from the md breakpoint up. The branding takes two of them with the --md_col variable, and the nav takes the other three, which pushes the menus to the right.

Why is the nav a grid inside a grid?

It keeps all the link groups in one labeled nav, so the footer adds one landmark instead of one per group. The inner auto-grid then fits as many group columns as the nav has room for.

What happens on a small screen?

The outer grid drops to one column, so the branding sits on top and the menus follow below it, in as many columns as fit.

Can I use an image as the logo?

Yes. Swap the svg for an img, and give it an empty alt when the brand name sits beside it, so the name is not read twice.