Summary

핵심 요약

A light grey box with no rounded corners or border and thin check marks; a boxless list with a rule under every row and thin large numerals "01 02"; or a big first sentence under "In one line". Three forms.

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 is a light grey box titled "Key points first" with a check-mark list; the box has no rounded corners or border. numbered has no box: thin large numerals "01 02 …" next to each sentence, with a rule under every row so it looks like a table. lead sets the first sentence big under "In one line", then continues with short dash (–) bullets.

check is the most familiar for a quick scan. numbered suits steps or sequences, and lead suits posts where one concluding sentence matters. numbered is the longest.

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