Post header — Design Pack Atlas

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

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

--- // 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} />

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'>; }

band puts breadcrumb, title, summary and a meta row inside a pale grey band. plain is white: breadcrumb, a rounded-outline topic label, a big title, summary and meta. split on wide screens puts title and summary on the left and a “Verified info for this post” box (sources, last checked, written, reading time rows) on the right. The meta row has a shield icon with “Checked against 6 official sources”, check date, written date and reading time; the affiliate notice is a quiet one-line thin-bordered box.

To lead with trust, the split box reads like a table; for simplicity, plain.

It borrows the tone of an issue page header.

Use it when — Variants 3

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

Same component, other packs

10Post header글 머리

10Post header글 머리

10Post header글 머리

Use it when — Variants 3