Design Pack Atlas
한국어
K KRDS · 02

Site footer

사이트 발

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

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 →

···

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.

···

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 has three columns: mark, name and tagline on the left, site info links in the middle, and "More parenting sites" on the right, then a rule and the notices below. compact squeezes the same content into one row of links, one row of sites and small-print notices.

The notices are long (independent-site statement, medical disclaimer, affiliate note, design credit), so the footer gets tall. That favours trust; choose compact if you want it short. In this pack the KRDS credit is a required sentence, so it appears in every footer.

The bold privacy-policy link follows the KRDS footer rule, and the credit sentence is the KRDS sample wording for its attribution licence.

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.