디자인 팩 아틀라스
EN
S shadcn · 13

본문

Body text

제목 아래 가는 선, 바깥 상자 없이 가로선만 있는 표가 기본(ruled)이에요. 상자로 감싸는 boxed, 여백이 넓고 제목이 큰 open 으로 바꿀 수 있어요.

쓰는 규칙본문 글자는 폰 17px·넓은 화면 18px, 줄 간격 1.8 — 어느 팩도 이걸 줄이지 않는다. 글 구조는 공통이고 팩은 모양만 바꾼다.

다른 이름: ProseTableTypography
···
usage (Astro)
---
// src/pages/[post].astro
import { Prose } from '../components/registry';
---
<Prose>
  <Content />
</Prose>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Prose": "ruled" }
}
props (TypeScript)
export interface ProseProps {
  variant?: VariantOf<'Prose'>;
  careVariant?: VariantOf<'CareGuide'>;
  /** 정적 페이지(소개 등)처럼 표·병원 카드가 없는 글 */
  plain?: boolean;
}

네 팩 나란히 보기 →

···

KRDS

13본문Body text

본문을 넉넉한 글자 크기와 줄 간격으로 읽게 하고, 표·타임라인·체크리스트·인용에 모양을 입혀요. 변형은 선과 상자의 양이 달라요.

···

Primer

13본문Body text

깃허브 문서 본문처럼 제목 아래에 가는 선이 그어지고(open 은 선 없이 크게), 표·체크리스트·인용도 그 모양을 따라요.

···

Carbon

13본문Body text

제목은 굵지 않은 가는 글씨, 체크리스트는 빈 네모 칸이에요. 표는 회색 머리 줄에 가로선만(ruled), 바깥 상자에 줄마다 번갈아 회색(boxed), 머리 바탕 없이 아래 선만(open)으로 달라져요.

ruled 는 표가 가로선뿐이고 머리는 회색 글자, 제목 아래에 가는 선이 있고 타임라인은 왼쪽 가는 선에 작은 점이에요. boxed 는 표를 둥근 테두리 상자 안에 칸마다 선을 긋고 짝수 줄에 옅은 회색 바탕을 깔며, 타임라인 항목도 테두리 상자예요. open 은 제목이 크고 제목 선이 없으며, 표 머리에만 연회색 바탕이 있고 세로선이 없고, 타임라인은 왼쪽 시기 칸과 오른쪽 내용으로 나뉘어요.

정보가 촘촘한 글이면 boxed 가 구분이 가장 분명하고, 읽는 흐름을 살리려면 open 이 낫고, 가장 가벼운 건 ruled 예요. 위급도 안내와 인용도 같은 본문 안에서 그려져요.

읽기 규칙(글자 크기 17·18px, 행간 1.8)은 이 팩 위에 더한 것이고, 원본 shadcn 본문은 16px 이에요. 인용은 한쪽 선 대신 전체 테두리로 그려요.

이럴 때 — 변형 3

  1. ruled가로선 표가 많고 차분하게 읽혀야 할 때 — 표는 가로선만, 타임라인은 점과 선.쓰는 사이트 4곳: feeding, toddlerfood, vaccination, 허브
  2. boxed칸 선 용량표·월령표처럼 칸을 짚어 가며 읽어야 할 때.쓰는 사이트 4곳: babyfood, babysick, milestone, newborn
  3. open넓은 여백 시기별 내용이 많은 글 — 큰 소제목, 시기 칸 | 내용.쓰는 사이트 3곳: babyplay, babysleep, birthprep
페이지로 열기 ↗

항목 추가 요청

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