Astro UI
Footer Minimal.
One line with the brand, a few links and the legal note. For landing pages and small sites.
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"; --- -
Use it
--- import FooterMinimal from "../components/viewership/footer-minimal/FooterMinimal.astro"; --- <FooterMinimal />
Props 4
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | · | Brand name, set as text unless the logo slot is used. |
links | { label: string; href: string }[] | · | A handful of links. |
legal | string | · | Copyright or legal line. |
slot: logo | slot | · | Replaces the text brand. |
Source 1 file
---
/**
* FooterMinimal: one line with the brand, a few links and the legal note.
* For landing pages and small sites.
*
* @example
* <FooterMinimal brand="Northwind" links={[{ label: "Privacy", href: "/privacy" }]} legal="© 2026 Northwind" />
*/
interface FooterLink {
label: string;
href: string;
}
interface Props {
brand: string;
links: FooterLink[];
legal?: string;
class?: string;
}
const { brand, links, legal, class: className } = Astro.props;
---
<footer class:list={["vs-footer-minimal", className]}>
<div class="vs-footer-minimal__inner">
<a class="vs-footer-minimal__brand" href="/">
<slot name="logo">{brand}</slot>
</a>
<nav aria-label="Footer">
<ul>
{
links.map((l) => (
<li>
<a href={l.href}>{l.label}</a>
</li>
))
}
</ul>
</nav>
{legal && <p class="vs-footer-minimal__legal">{legal}</p>}
</div>
</footer>
<style>
.vs-footer-minimal {
container-type: inline-size;
background: var(--vs-page);
color: var(--vs-ink);
font-family: var(--vs-font-sans);
font-stretch: var(--vs-font-stretch);
border-top: var(--vs-border-w) solid var(--vs-line-strong);
}
.vs-footer-minimal__inner {
display: grid;
gap: 16px;
align-items: center;
max-width: var(--vs-container);
margin-inline: auto;
padding: 28px var(--vs-gutter);
}
.vs-footer-minimal a {
color: inherit;
text-decoration: none;
}
.vs-footer-minimal a:focus-visible {
outline: none;
box-shadow: var(--vs-focus-ring);
}
.vs-footer-minimal__brand {
font-family: var(--vs-font-display, var(--vs-font-sans));
font-size: 1.125rem;
font-weight: var(--vs-display-weight);
letter-spacing: var(--vs-display-tracking);
text-transform: var(--vs-display-transform);
}
.vs-footer-minimal ul {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.875rem;
color: var(--vs-ink-2);
}
.vs-footer-minimal ul a:hover {
color: var(--vs-ink);
}
.vs-footer-minimal__legal {
margin: 0;
font-size: 0.8125rem;
color: var(--vs-ink-3);
}
@container (min-width: 760px) {
.vs-footer-minimal__inner {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 40px;
}
.vs-footer-minimal ul {
justify-content: center;
}
}
</style>Original, MIT.