핵심 요약

Summary

글 맨 위 핵심을 세 가지로 보여요. 체크 표시가 붙은 상자, 순번과 선, 첫 줄만 굵고 큰 글 중 골라요.

쓰는 규칙세 줄에서 다섯 줄. 요약 상자에 색 띠를 두르지 않는다.

다른 이름: 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 는 모서리가 둥근 테두리 상자 안에 원형 체크 아이콘과 「핵심만 먼저」, 줄마다 체크 표시가 붙어요. numbered 는 상자 없이 01~05 회색 순번과 문장을 가는 선으로 나눠요. lead 는 「한 줄로 말하면」 작은 머리말 아래 첫 문장만 굵고 크게, 나머지는 동그라미 목록이에요.

눈에 확 띄게 하려면 check, 문서처럼 차분하게 하려면 numbered, 한 문장 결론을 먼저 던지려면 lead 가 맞아요. 모두 그림자 없는 흰 화면이에요.

check 는 shadcn 의 Alert 모양을 쓰고 그림자가 없어요.

이럴 때 — 변형 3

check체크 상자 할 일·확인할 것을 정리한 글.쓰는 사이트 4곳: babyplay, milestone, toddlerfood, vaccination
numbered순번 단계·시기처럼 순서가 있는 내용 — 상자 없이 순번과 선.쓰는 사이트 3곳: babysick, feeding, newborn
lead한 줄로 말하면 결론이 한 문장으로 정리되는 글 — 첫 줄을 크게.쓰는 사이트 4곳: babyfood, babysleep, birthprep, 허브