P Primer · 13

Body text

본문

Like a GitHub document body, headings get a thin line underneath (open drops it and sets them larger), and tables, checklists and quotes follow the same look.

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: Prosemarkdown-body
···
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 lines only and timelines small grey dots on a vertical line with bold stage names. boxed looks like a GitHub table, with lines on every cell and light-grey even rows, and timelines inside one box with divided rows. open greys only the table header, has no vertical lines, drops the line under headings and makes them bigger, and turns timelines into a list grouped under small grey stage labels. In all variants quotes get a four-sided outline with no left bar, and checklists use square boxes.

For table-heavy posts boxed reads easiest; for a plainer look, ruled or open. The sample is narrow, so tables look small and cells can feel cramped on phones. The urgency guide is drawn inside this body too.

Reading size and line spacing come from the site-wide styles, not from Primer.

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.