Design Pack Atlas
한국어
C Carbon · 10

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

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.

···

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 breadcrumb, title, summary, a trust line (blue shield with the source count, a bold check date, written date, reading time) and the disclosure box inside a grey band. plain has no band: on wide screens a narrow left column stacks "Topic / Sources / Last checked / Written / Reading time" with label above value, and the breadcrumb and large title sit in the wide right column. split divides the grey band in two: title and summary on the left, a white box "Facts about this post" (label and value rows) on the right.

Because this is health information, all three put sources and check date up front. band is shortest; split shows the facts as a table, which feels credible but folds to one column on narrow screens. The pack’s intent is that verification info looks stronger than the ad notice.

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.