주제·안내 페이지 머리

Page head

큰 검은 제목과 옅은 회색 소개글. band 는 연회색 바탕 띠에, plain 은 흰 바탕에 올라가요.

쓰는 규칙페이지 제목(h1)은 이 안에 하나뿐이다. 주제 페이지는 글 수와 다른 주제로 가는 길을 함께 둔다.

다른 이름: 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 는 연회색 띠 안에 경로, 작은 「주제」 머리말, 제목, 소개, 흰 알약 「글 5편」, 다른 주제로 가는 테두리 있는 버튼들이 세로로 쌓여요. plain 은 띠 없이 제목이 더 크고, 「글 5편 · 다른 주제」가 한 줄로 나오고 다른 주제는 밑줄 글자예요. 그 아래 가는 선으로 끝나요.

주제 사이를 오가게 하고 싶으면 버튼이 눈에 띄는 band 가 쉬워요. 글이 적은 사이트거나 제목 자체를 크게 보이고 싶으면 plain 이에요. 두 변형 모두 페이지에 제목은 하나뿐이에요.

band 의 띠는 아주 옅은 회색이에요. 푸터와 달리 여기서는 큰 글자라 읽는 데 문제가 없어요.

이럴 때 — 변형 2

band띠 주제 페이지에서 다른 주제로 옮겨 다니게 하고 싶을 때 — 다른 주제가 칩으로 보인다.쓰는 사이트 6곳: babyfood, babysick, babysleep, feeding, milestone, toddlerfood
plain띠 없이 머리를 가볍게 두고 글 목록을 빨리 보여 주고 싶을 때.쓰는 사이트 5곳: babyplay, birthprep, newborn, vaccination, 허브