Design Pack Atlas
한국어
C Carbon · 02

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

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.

···

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 is the same black as the header. It uses four grid columns: the name, then site info, then "Related parenting sites" running across two columns. Its links split into two stacks of two, so with three sites the far-right column holds just one link. A thin line separates the columns from the notice lines: independent-site notice, medical disclaimer, Coupang Partners note, credit line and copyright, one per row. compact is one grey block: links on one row separated by "/", sites on another row. The notice lines are the same as in columns.

With many links and sites, columns is easier to scan. With few, compact is much shorter. If your header is black, a black footer makes the two read as a set.

The credit line appears on every page in both variants; it carries the Carbon tokens/icons and IBM Plex Sans KR credits.

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.