Table of contents

목차

The "On this page" list has a thin grey rule on its left and only the section you are reading turns dark. It can be a folded box, a chip row, or a numbered list.

RuleShown only when there are three or more sections. The current section is marked for screen readers too, not just by color.

Also known as: TocOn this page

···

usage (Astro)

---
// design-systems/krds/components/ArticleLayout.astro
// Toc 은 이 파일 안에서 쓰인다(팩 구현끼리)
---
<Toc items={toc} placement="inline" variant={tocVariant} />

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Toc": "fold" }
}

props (TypeScript)

export interface TocProps {
  items: TocItem[];
  /** inline = 글 위(폰, chips 변형은 모든 폭), sidebar = 넓은 화면 옆 */
  placement: 'inline' | 'sidebar';
  variant?: VariantOf<'Toc'>;
}

fold is a folded box on a phone: one row "Contents 13" with a chevron; on wide screens it becomes a list that follows beside the text. chips is the same everywhere: rounded grey chips wrapping across lines, with no side column. open unfolds into 48px numbered rows (01, 02 …) on a phone, with a separate side list on wide screens.

With more than ten sections, fold saves phone space. open makes the contents a visible guide, and chips frees the full width for text. In the demo, fold and open both show the side list at the right on wide screens.

Use it when — Variants 3

foldFold Long posts where the first phone screen is precious — folded on phones, a side list on wide screens.Used by 3: babyplay, babysick, babysleep
chipsChips When there are few short sections and a side column would be wasted — one row of chips at every width.Used by 5: babyfood, milestone, newborn, toddlerfood, 허브
openOpen When the headings alone should tell the story — an open numbered list even on phones.Used by 3: birthprep, feeding, vaccination