Page head

주제·안내 페이지 머리

A big black title with a light gray intro. band sits on a light gray strip; plain sits on white.

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

···

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 the path, a small “Topic” label, the title, the intro, a white “5 posts” pill and outlined buttons to other topics on a light gray strip. plain has no strip and a bigger title, shows “5 posts · other topics” on one line with other topics as underlined text, and ends with a thin line.

If you want readers to hop between topics, band’s buttons make that easy. For a site with few posts or a very large title, plain works. In both there is only one title on the page.

The strip in band is a very light gray. Unlike the footer, the text here is large, so reading is not a problem.

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