Design Pack Atlas
한국어
S shadcn · 10

Post header

글 머리

Under the path, a very large black title and gray lead, then the “This posting is part of Coupang Partners…” notice in an outlined box.

RuleThe trust line (how many sources, last checked) comes before the affiliate disclosure, and the disclosure never gets smaller than 14px.

Also known as: PostHeader
···
usage (Astro)
---
// src/pages/[post].astro
import { PostHeader } from '../components/registry';
---
<PostHeader
  crumbs={crumbs.slice(0, 2)}
  category={{ href: categoryPath(category.slug), label: category.name }}
  title={post.data.title}
  lead={post.data.description}
  sources={post.data.sources.length}
  checked={checked}
  modified={modified}
  wasUpdated={isoDate(modified) !== isoDate(post.data.publishedAt)}
  minutes={readingMinutes(post.body ?? '')}
  disclosure={hasAffiliateLink ? AFFILIATE_DISCLOSURE : undefined}
/>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "PostHeader": "band" }
}
props (TypeScript)
export interface PostHeaderProps {
  crumbs: Crumb[];
  category: Link;
  title: string;
  lead: string;
  /** 출처 수 — 「기관 자료 n곳과 대조」 링크(#sources) */
  sources: number;
  checked: Date;
  modified: Date;
  wasUpdated: boolean;
  minutes: number;
  /** 실제 쿠팡 링크가 있는 글만 — 글 머리 대가성 문구(14px, 신뢰 줄보다 뒤) */
  disclosure?: string;
  variant?: VariantOf<'PostHeader'>;
}

See all four packs side by side →

···

KRDS

10Post header글 머리

Puts "checked against 6 institutional sources · last verified" under the title and summary, with the affiliate note in a quiet outlined box in small but readable type.

···

Primer

10Post header글 머리

A big title is followed by a one-line meta row with shield and clock icons, and a line below separates the header from the body. split moves the verification info into a table-like box on the right.

···

Carbon

10Post header글 머리

The "checked against 6 official sources" line and the check date come first, under the title or in a side column or box, while the Coupang Partners notice sits quietly in a one-line bordered box.

band puts the path, title, lead and a one-line trust row (shield icon “Checked against 6 sources” | checked date | written date | reading time, split by vertical lines) on a light gray strip, followed by the affiliate notice. plain has a “Stage-by-stage baby food” pill and a large title on white, with the info on one line: the underlined “Checked against 6 sources” followed by gray text. split, on wide screens, puts the title and lead on the left and a “Verified info” card (sources, last check, written, reading time) on the right.

Pick split to make trust info prominent, plain to keep it light, and band to mark the start of a post clearly. In band and plain, trust info comes before the affiliate notice. In split, the notice sits under the lead on the left and the verified-info card is in the right column.

It follows the page-head style of documentation sites.

Use it when — Variants 3

  1. bandBand When the head and the body should be clearly separated.Used by 6: babysick, babysleep, feeding, milestone, toddlerfood, 허브
  2. plainPlain When titles are long and reading should start right away — content info on one line.Used by 3: babyfood, babyplay, birthprep
  3. splitSplit When sources and check dates deserve a table, as in health content — title | facts on wide screens.Used by 2: newborn, vaccination
Open as page ↗

Suggest an entry

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