Summary

핵심 요약

Shows the key points at the top of a post in three ways: a box with checkmarks, numbers with lines, or a bold first line with the rest as bullets.

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

Also known as: SummaryAlert

···

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 round check icon and “Key points first” in a rounded outlined box with a checkmark per line. numbered has no box: gray numbers 01 to 05 and sentences separated by thin lines. lead shows a small “In one line” label, then only the first sentence large and bold, with the rest as a bulleted list.

Choose check to stand out, numbered for a calm document feel, and lead to throw out a one-sentence conclusion first. All are shadow-free white screens.

check uses shadcn’s Alert shape with no shadow.

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