핵심 요약

Summary

체크·순번은 「핵심만 먼저」 회색 머리 줄이 있는 상자에 담기고, lead 는 상자 없이 「한 줄로 말하면」 아래에 첫 줄을 크게 써요.

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

다른 이름: 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는 줄마다 회색 체크 아이콘이 붙고, numbered는 줄마다 순번 칸(회색 숫자)이 있고 줄 사이에 선이 그어져요. 둘 다 연회색 머리 줄이 있는 테두리 상자예요. lead는 상자 없이 작은 제목과 아래 선, 「한 줄로 말하면」 아래에 굵은 큰 글자로 첫 줄을 쓰고 나머지를 점 목록으로 이어요.

순서가 있는 단계면 numbered, 읽기 편하고 가볍게 가려면 check, 한 문장으로 먼저 결론을 주고 싶으면 lead가 맞아요. 상자 둘은 글 위에서 꽤 존재감이 있고 lead는 본문과 가장 자연스럽게 이어져요.

이럴 때 — 변형 3

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