Design Pack Atlas
한국어
K KRDS · 10

Post 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.

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 →

···

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.

···

shadcn/ui

10Post 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.

band stacks breadcrumbs, title, summary, a trust row (blue link "checked against 6 sources", bold date) and the affiliate box inside a grey band. plain uses white, a blue topic label and a very large title, with one row — sources, last verified, written, reading time — split by vertical rules. split puts title and summary on the left and a rounded "About this post" table (sources, last verified, written, reading time) on the right on wide screens.

In all three the trust information comes before the affiliate note and is bolder. It suits medical-info posts; split is the tidiest.

The right-hand table follows the KRDS content-information box.

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.