디자인 팩 아틀라스
EN
K KRDS · 11

핵심 요약

Summary

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

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

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

네 팩 나란히 보기 →

···

Primer

11핵심 요약Summary

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

···

Carbon

11핵심 요약Summary

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

···

shadcn/ui

11핵심 요약Summary

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

check 는 모서리가 둥근 회색 상자(테두리 없음)에 「핵심만 먼저」 제목과 파란 체크 목록을 담아요. numbered 는 상자 없이 굵은 번호와 문장을 회색 선으로 나눠요. lead 는 「한 줄로 말하면」 아래 첫 줄을 굵고 크게 쓰고 나머지는 보통 글씨 점 목록으로 두며 위아래에 선이 있어요.

check 가 가장 눈에 띄고, numbered 는 순서가 있는 내용에, lead 는 결론 한 줄이 분명한 글에 맞아요. 줄이 길면 check 는 줄바꿈이 많아 높이가 커져요.

상자 바탕은 KRDS 의 옅은 회색 단계이고, 파란 띠나 옅은 파랑 상자 대신 회색을 쓴 건 이 사이트에 맞춘 선택이에요.

이럴 때 — 변형 3

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

항목 추가 요청

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