C Carbon · 04

주제·안내 페이지 머리

Page head

주제 이름이 가는 큰 글씨로 나와요. 회색 띠 위에 올리거나, 띠 없이 흰 바탕에 두고 아래에 탭 줄을 붙여요.

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

다른 이름: 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는 옅은 회색 띠 안에 경로, 「주제」 라벨, 큰 제목, 설명, 글 수, 다른 주제 칩을 차례로 쌓아요. plain은 띠가 없어요. 경로 아래 「주제 · 글 5편」 라벨, 더 큰 제목, 설명이 오고 그 밑에 탭 줄이 붙어요. 탭은 지금 주제가 굵은 글씨와 아래 선으로 표시돼요.

band는 글 목록 앞에서 영역을 또렷하게 나눠 줘요. plain은 여백이 넓어서 조용하고, 주제를 오가는 탭이 있어 형제 주제로 옮겨 다니기 쉬워요. 제목 크기가 크므로 주제 이름이 짧을 때 더 잘 어울려요.

이 머리가 페이지 제목을 맡아요.

이럴 때 — 변형 2

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

항목 추가 요청

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