P Primer · 10

글 머리

Post header

큰 제목 아래 방패·시계 아이콘이 붙은 메타 한 줄이 이어지고 아래 선으로 본문과 갈라요. split 은 확인 정보를 오른쪽 표 상자로 따로 빼요.

쓰는 규칙신뢰 줄(기관 자료 몇 곳과 대조·마지막 확인일)이 대가성 문구보다 먼저 나오고, 대가성 문구는 14px 아래로 작아지지 않는다.

다른 이름: PostHeader
···
usage (Astro)
---
// src/pages/[post].astro
import { PostHeader } from '../components/registry';
---
<PostHeader
  crumbs={crumbs.slice(0, 2)}
  category={{ href: categoryPath(category.slug), label: category.name }}
  title={post.data.title}
  lead={post.data.description}
  sources={post.data.sources.length}
  checked={checked}
  modified={modified}
  wasUpdated={isoDate(modified) !== isoDate(post.data.publishedAt)}
  minutes={readingMinutes(post.body ?? '')}
  disclosure={hasAffiliateLink ? AFFILIATE_DISCLOSURE : undefined}
/>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "PostHeader": "band" }
}
props (TypeScript)
export interface PostHeaderProps {
  crumbs: Crumb[];
  category: Link;
  title: string;
  lead: string;
  /** 출처 수 — 「기관 자료 n곳과 대조」 링크(#sources) */
  sources: number;
  checked: Date;
  modified: Date;
  wasUpdated: boolean;
  minutes: number;
  /** 실제 쿠팡 링크가 있는 글만 — 글 머리 대가성 문구(14px, 신뢰 줄보다 뒤) */
  disclosure?: string;
  variant?: VariantOf<'PostHeader'>;
}

band는 연회색 바탕 띠 안에 경로, 제목, 요약, 메타 줄이 놓여요. plain은 흰 바탕에서 경로 아래 주제 이름표(둥근 테두리), 큰 제목, 요약, 메타가 이어져요. split은 넓은 화면에서 왼쪽에 제목·요약, 오른쪽에 「이 글의 확인 정보」 상자(참고한 자료·마지막 확인·작성·읽는 시간 줄)가 서요. 메타 줄에는 방패 아이콘과 「기관 자료 6곳과 대조」, 확인 날짜, 작성일, 읽는 시간이 들어가고, 대가성 문구는 가는 테두리 상자 한 줄로 조용히 붙어요.

글 신뢰를 앞세우고 싶으면 split의 상자가 표처럼 읽혀서 좋고, 간단히 하려면 plain이에요.

이슈 화면 머리 같은 말투예요.

이럴 때 — 변형 3

  1. band띠 글 머리와 본문을 확실히 나누고 싶을 때.쓰는 사이트 6곳: babysick, babysleep, feeding, milestone, toddlerfood, 허브
  2. plain큰 제목 제목이 길고 바로 본문을 읽게 하고 싶을 때 — 「콘텐츠 정보」는 한 줄로.쓰는 사이트 3곳: babyfood, babyplay, birthprep
  3. split두 칸 건강 정보처럼 출처·확인일을 표로 강조하고 싶을 때 — 넓은 화면에서 제목 | 확인 정보.쓰는 사이트 2곳: newborn, vaccination
페이지로 열기 ↗

항목 추가 요청

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