P Primer · 04

주제·안내 페이지 머리

Page head

주제 이름 옆에 글 수가 작은 회색 숫자 칸으로 붙어요. 띠를 깔면 연회색 바탕이고, 다른 주제는 하늘색 칩이에요.

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

다른 이름: 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'>;
}

band는 연회색 띠와 아래 선 위에 경로, 「주제」 이름표, 큰 제목과 글 수, 설명, 「다른 주제」 칩이 차례로 놓여요. plain은 흰 바탕에서 제목 아래에 가는 선이 그어지고, 다른 주제는 파란 링크를 가운뎃점으로 이어 한 줄로 써요. 제목은 band 에서는 굵지 않은 큰 글자이고, plain 에서는 굵은 큰 글자예요.

주제 사이를 옮겨 다니게 하고 싶으면 칩이 눈에 띄는 band가, 목록을 빨리 보여 주고 싶으면 plain이 맞아요. 소개·면책 같은 안내 페이지에도 같은 머리를 써요. 칩은 파란 계열이라 링크 색과 어울려요.

페이지 제목은 이 머리 안에 하나만 있어요.

이럴 때 — 변형 2

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

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.