Page head — Design Pack Atlas

Page head

주제·안내 페이지 머리

A large bold title with a description and post count, plus a way to other topics. The band variant is grey with blue chips; the plain one uses a line of underlined links.

RuleThe page has exactly one title (h1), here. Topic pages also show the post count and a way to other topics.

Also known as: PageHead

--- // src/pages/category/[category].astro import { PageHead } from '../../components/registry'; --- <PageHead crumbs={crumbs.slice(0, 1)} eyebrow="주제" title={category.name} lead={category.description || undefined} count={posts.length} siblings={siblings} />

export interface PageHeadProps { crumbs: Crumb[]; eyebrow?: string; title: string; lead?: string; /** 카테고리 글 수 */ count?: number; /** 다른 주제로 가는 링크 */ siblings?: Link[]; /** 정적 페이지 시행일(「2026-10-13」) */ updated?: string; variant?: VariantOf<'PageHead'>; }

band stacks breadcrumbs, a "Topic" label, a big title, a description, "5 posts" and blue "Other topics" chips inside a light grey band. plain drops the band: breadcrumbs, title and description on white, then "5 posts, other topics: A · B · C" on one line of underlined links.

band makes a category feel like its own section and takes more height. plain is short and document-like, and suits about or disclaimer pages where text follows right away.

Use it when — Variants 2

bandBand When readers should hop between topics — other topics show as chips.Used by 6: babyfood, babysick, babysleep, feeding, milestone, toddlerfood
plainPlain When the head should stay light so the list starts sooner.Used by 5: babyplay, birthprep, newborn, vaccination, 허브

Same component, other packs

04Page head주제·안내 페이지 머리

04Page head주제·안내 페이지 머리

04Page head주제·안내 페이지 머리

Use it when — Variants 2