Summary

핵심 요약

The key-points block at the top of a post: a rounded, borderless light-grey box with blue checks, bold numbers split by grey rules with no box, or a bold oversized first line.

RuleThree to five lines. No colored stripe on the summary box.

Also known as: Summary

···

usage (Astro)

---
// src/pages/[post].astro
import { Summary } from '../components/registry';
---
<Summary slot="lead" items={post.data.summary} />

site.json

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

props (TypeScript)

export interface SummaryProps {
  items: string[];
  variant?: VariantOf<'Summary'>;
}

check puts a "Key points first" heading and a blue checklist in a rounded grey box with no border. numbered drops the box: bold numbers and sentences separated by grey rules. lead writes the first line big and bold under "In one line", keeps the rest as a normal bulleted list, with rules above and below.

check stands out most, numbered fits ordered content, and lead fits posts with one clear conclusion. With long lines check wraps a lot and gets tall.

The box uses a light KRDS grey step; grey replaces the blue band or pale-blue box to suit this site.

Use it when — Variants 3

checkCheck Posts that boil down to things to do or check.Used by 4: babyplay, milestone, toddlerfood, vaccination
numberedNumbered Ordered content such as steps or stages — numbers and rules, no box.Used by 3: babysick, feeding, newborn
leadLead line Posts whose conclusion fits one sentence — the first line is large.Used by 4: babyfood, babysleep, birthprep, 허브

Same component, other packs

11Summary핵심 요약

11Summary핵심 요약

11Summary핵심 요약

Use it when — Variants 3