Summary

핵심 요약

Checks and numbers sit in a box with a grey “Key points first” header row; lead drops the box and writes the first line large under “In one line”.

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

Also known as: SummarySubhead

···

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 grey check icon on each line; numbered has a number cell (grey digits) per line with lines between. Both are bordered boxes with a pale grey header row. lead has no box: a small heading with a line under it, the first line in bold large type under “In one line”, then the rest as a bulleted list.

For ordered steps use numbered; for light, easy reading, check; to give the conclusion in one sentence first, lead. The two boxes have real presence at the top of a post, while lead blends into the body most naturally.

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