Design Pack Atlas
한국어
P Primer · 04

Page head

주제·안내 페이지 머리

The topic name is followed by its post count in a small grey badge. The band version has a pale grey background and other topics appear as light-blue chips.

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

Also known as: PageHeadSubhead
···
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'>;
}

See all four packs side by side →

···

KRDS

04Page 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.

···

Carbon

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

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

···

shadcn/ui

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

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

band stacks, on a pale grey band with a line below: breadcrumb, a “Topic” label, a large title with the post count, a description and “Other topics” chips. plain stays on a white background with a thin line under the title, and other topics are blue links joined by middle dots on one line. The title is large and regular weight in band, and large and semibold in plain.

If readers should hop between topics, the chips in band stand out; to start the list sooner, plain fits. The same head is used for info pages such as About or Disclaimer. The chips are blue and match the link color.

The page title lives in this head, and there is only one.

Use it when — Variants 2

  1. bandBand When readers should hop between topics — other topics show as chips.Used by 6: babyfood, babysick, babysleep, feeding, milestone, toddlerfood
  2. plainPlain When the head should stay light so the list starts sooner.Used by 5: babyplay, birthprep, 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.