디자인 팩 아틀라스
EN
C Carbon · 11

핵심 요약

Summary

모서리도 테두리도 없는 옅은 회색 상자에 가는 체크 표시, 상자 없이 줄마다 선을 긋고 「01 02」 가는 큰 숫자를 붙인 순번 줄, 「한 줄로 말하면」 아래 첫 문장만 크게 쓴 모양 세 가지예요.

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

다른 이름: 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'>;
}

네 팩 나란히 보기 →

···

KRDS

11핵심 요약Summary

글 맨 위 핵심 요약이에요. 모서리 둥근 옅은 회색 상자에 파란 체크가 붙고, 상자 없이 굵은 번호를 회색 선으로 나누거나, 첫 줄만 굵고 크게 쓰는 모양도 있어요.

···

Primer

11핵심 요약Summary

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

···

shadcn/ui

11핵심 요약Summary

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

check는 옅은 회색 상자에 「핵심만 먼저」 제목과 체크 표시 목록이에요. 상자에 모서리나 테두리는 없어요. numbered는 상자 없이 「01 02 …」 가는 큰 숫자 옆에 문장이 붙고 줄마다 선이 그어져 표처럼 보여요. lead는 「한 줄로 말하면」 아래 첫 문장을 큰 글씨로 쓰고, 나머지는 짧은 줄표(–) 목록으로 이어요.

한 번에 훑게 하려면 check가 가장 익숙해요. 단계나 순서가 있는 내용이면 numbered가 맞고, 결론 한 문장이 중요한 글에는 lead가 좋아요. numbered는 가장 길어요.

이럴 때 — 변형 3

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

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.