Design Pack Atlas
한국어
P Primer · 02

Site footer

사이트 발

A white footer with a single line above and small grey text. It ends the page quietly, like the foot of a web app.

RuleEvery page footer carries the design credit (for KRDS the prescribed sentence is required and the audit fails without it). The “not affiliated with Coupang” notice is bold.

Also known as: SiteFooter
···
usage (Astro)
---
// src/layouts/Base.astro
import { SiteFooter } from '../components/registry';
---
<SiteFooter
  site={site}
  links={footerLinks(IS_HUB)}
  related={related}
  notice={FOOTER_TEXT.notice}
  medical={FOOTER_TEXT.medical}
  affiliate={FOOTER_TEXT.affiliate}
  credit={designCredit()}
  year={new Date().getFullYear()}
/>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "SiteFooter": "columns" }
}
props (TypeScript)
export interface SiteFooterProps {
  site: SiteConfig;
  /** 소개·면책·개인정보·RSS */
  links: Link[];
  related: SiteLink[];
  /** 쿠팡 비공식 고지 — 굵게 */
  notice: string;
  medical: string;
  affiliate: string;
  /** 디자인 시스템 출처 표기 — 감싸는 요소에 data-design-credit 필수(seo:audit 가 KRDS 문구를 찾는다) */
  credit: { text: string; href?: string; creditsHref: string };
  year: number;
  variant?: VariantOf<'SiteFooter'>;
}

See all four packs side by side →

···

KRDS

02Site footer사이트 발

A light grey footer that stacks generously. Only the privacy policy link is bold, and the long credit sentence is underlined.

···

Carbon

02Site footer사이트 발

The same black as the header, split into columns for the name, site info and related sites, with a notice block underneath. compact is a lighter grey single block.

···

shadcn/ui

02Site footer사이트 발

No background color, just a line on top. Text is light gray; only the column headings and the first line of the “not affiliated with Coupang” notice are black and bold.

columns puts the mark, name and one-line intro on the left, “Site info” links in the middle and “Sister sites” on the right, with the notices under a line. compact puts the mark, “© name” and the links on one horizontal row, then a “Sister sites” row, then the small notices. In both, the “not affiliated with Coupang” notice is bold, while the other notices and the design credit (“Design tokens: Primer Primitives (MIT) · Icons: Octicons (MIT)”) are small text.

With many links and several sister sites, columns looks tidier; for a short ending, compact fits. Both have almost no decoration, so they do not stand out on any site. The text is small and grey, so link spacing can feel tight on phones.

The credit line names Primer and Octicons, and its “Design and font credits” link leads to the About page that carries the MIT notice. Primer does not require a credit, but it is included on every page.

Use it when — Variants 2

  1. columnsColumns When there are enough sister sites to deserve their own column.Used by 4: babyfood, babyplay, milestone, toddlerfood
  2. compactCompact When the footer should stay short and there are only a few links.Used by 7: babysick, babysleep, birthprep, feeding, newborn, vaccination, 허브
Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.