Page head

주제·안내 페이지 머리

The topic name in large, thin type. It sits either on a grey band, or on white with a tab row underneath.

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

Also known as: PageHeadPage header

···

usage (Astro)

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

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "PageHead": "band" }
}

props (TypeScript)

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 breadcrumb, a "Topic" label, the big title, description, post count and chips for other topics inside a light grey band. plain has no band: a "Topic · 5 posts" label under the breadcrumb, an even larger title, the description, then a tab row where the current topic is bold with an underline.

band marks off the area clearly before the post list. plain is quieter with more white space, and the tabs make it easy to hop between sibling topics. The large title suits short topic names best.

It holds the page title.

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