K KRDS · 12

Table of contents

목차

The default table of contents is a right-hand "On this page" list. The chips variant shows a row of chips at every width.

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: TocIn-page navigation

···

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'>;
}

On phones fold is a collapsed rounded box "Contents 13"; on wide screens it is a small-text list beside the post with a vertical rule. chips is bordered chips wrapping over lines, with no side column. open is an open numbered list on phones and sits beside the post on wide screens.

For long posts with many items fold pushes the body down least. Use chips for short posts or when you want the full width; with 13 items the chips wrap onto three rows.

"On this page" comes from the KRDS in-page navigation.

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