Design Pack Atlas
한국어
S shadcn · 02

Site 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.

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.

···

Primer

02Site 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.

···

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.

columns puts the mark, name and tagline on the left and two vertical lists on the right, “Site info” and “Sister parenting sites”. A thin line then separates the notices, design credit and copyright. compact puts the name and links on one line and the sister sites on the next, so the whole footer is much shorter. The notice text is identical in both.

Pick columns when there are many links and several sister sites; pick compact when there are only a few links. In practice seven sites use compact. On screen the text is small and light, so the bold black column headings and the first line of the notice are the only emphasis.

A light gray footer background made the pale text hard to read (4.32:1 contrast), so the pack uses white plus a border instead.

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.