Astro UI
Footer Wordmark.
Link columns on a dark ground with the brand set across the full width beneath.
Site chromeSectionNo dependencies Original, MIT
Style
Using Claude Code? Give it the agent prompt and skip these steps.
-
Import the foundation once
foundation.css holds the tokens every component reads.
--- // src/layouts/Layout.astro import "../styles/foundation.css"; --- -
Copy FooterWordmark.astro
Paste into
src/components/viewership/footer-wordmark/ -
Use it
--- import FooterWordmark from "../components/viewership/footer-wordmark/FooterWordmark.astro"; --- <FooterWordmark />
Props 4
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | · | Brand name, set huge across the bottom. |
tagline | string | · | One line beside the columns. |
columns | { title: string; links: { label: string; href: string }[] }[] | · | Link columns. |
legal | string | · | Copyright or legal line. |
Source 1 file
---
/**
* FooterWordmark: link columns on a dark ground, with the brand name set
* across the full width beneath. Sized to its container, so it never
* overflows.
*
* @example
* <FooterWordmark brand="Northwind" columns={[...]} legal="© 2026 Northwind" />
*/
interface FooterLink {
label: string;
href: string;
}
interface Column {
title: string;
links: FooterLink[];
}
interface Props {
brand: string;
tagline?: string;
columns: Column[];
legal?: string;
class?: string;
}
const { brand, tagline, columns, legal, class: className } = Astro.props;
---
<footer class:list={["vs-footer-wordmark", className]}>
<div class="vs-footer-wordmark__inner">
<div class="vs-footer-wordmark__top">
{tagline && <p class="vs-footer-wordmark__tagline">{tagline}</p>}
<nav class="vs-footer-wordmark__cols" aria-label="Footer">
{
columns.map((c) => (
<div>
<h2 class="vs-footer-wordmark__col-title">{c.title}</h2>
<ul>
{c.links.map((l) => (
<li>
<a href={l.href}>{l.label}</a>
</li>
))}
</ul>
</div>
))
}
</nav>
</div>
<a class="vs-display vs-footer-wordmark__giant" href="/">{brand}</a>
{legal && <p class="vs-footer-wordmark__legal">{legal}</p>}
</div>
</footer>
<style>
.vs-footer-wordmark {
container-type: inline-size;
overflow: hidden;
background: var(--vs-ink);
color: var(--vs-ink-inverse);
font-family: var(--vs-font-sans);
font-stretch: var(--vs-font-stretch);
}
.vs-footer-wordmark__inner {
max-width: var(--vs-container);
margin-inline: auto;
padding: clamp(40px, 7cqi, 80px) var(--vs-gutter) 24px;
}
.vs-footer-wordmark a {
color: inherit;
text-decoration: none;
}
.vs-footer-wordmark a:focus-visible {
outline: none;
box-shadow: var(--vs-focus-ring);
}
.vs-footer-wordmark__top {
display: grid;
gap: 36px;
}
.vs-footer-wordmark__tagline {
max-width: 20rem;
margin: 0;
font-size: 1.0625rem;
line-height: 1.45;
}
.vs-footer-wordmark__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 24px;
}
.vs-footer-wordmark__col-title {
margin: 0 0 14px;
font-size: 0.8125rem;
font-weight: 600;
color: color-mix(in srgb, var(--vs-ink-inverse) 55%, transparent);
}
.vs-footer-wordmark ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9375rem;
}
.vs-footer-wordmark ul a:hover {
color: var(--vs-accent);
}
.vs-footer-wordmark .vs-footer-wordmark__giant {
display: block;
margin-top: clamp(40px, 8cqi, 96px);
font-size: clamp(3rem, 19cqi, 15rem);
line-height: 0.82;
white-space: nowrap;
color: var(--vs-accent);
}
.vs-footer-wordmark__legal {
margin: 24px 0 0;
font-size: 0.8125rem;
color: color-mix(in srgb, var(--vs-ink-inverse) 55%, transparent);
}
@container (min-width: 760px) {
.vs-footer-wordmark__top {
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: 64px;
}
.vs-footer-wordmark__cols {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}
</style>Original, MIT.