K KRDS · 13

Body text

본문

Body text is set large with generous line spacing, and tables, timelines, checklists and quotes get their shape. Variants differ in how many lines and boxes they use.

RuleBody text is 17px on phones and 18px on wide screens at 1.8 line height — no pack shrinks it. The structure is shared; packs only restyle it.

Also known as: Prose
···
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;
}

ruled gives tables horizontal rules only with no outer box, a thin line above headings, and a timeline of dots and a vertical line. boxed gives tables lines in every cell and a grey header, headings with wide space and no line, and bordered timeline boxes. open has only a grey table header with no vertical lines, the biggest headings, and a timeline split into "Period | Content" columns.

For posts heavy on tables boxed separates cells most clearly; for reading-first posts open or ruled is lighter. The diagram figure (a stage diagram in a grey box) is about 70% of the text width, pushed left, in all three.

The site decides the body markup and this pack only styles it. The reading rules (a bit larger text, line spacing 1.8) were adapted from the KRDS body text (line spacing 1.5).

Use it when — Variants 3

  1. ruledRuled Table-heavy posts that should read calmly — horizontal rules only, dot-and-line timelines.Used by 4: feeding, toddlerfood, vaccination, 허브
  2. boxedBoxed When readers trace cells one by one, as in amount or age charts.Used by 4: babyfood, babysick, milestone, newborn
  3. openOpen Posts with lots of age-by-age content — big subheadings, stage | content.Used by 3: babyplay, babysleep, birthprep
Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.