S shadcn · 10

글 머리

Post header

경로 아래 아주 큰 검은 제목과 회색 리드글, 그 아래 「이 포스팅은 쿠팡 파트너스…」 문구가 테두리 상자에 들어가요.

쓰는 규칙신뢰 줄(기관 자료 몇 곳과 대조·마지막 확인일)이 대가성 문구보다 먼저 나오고, 대가성 문구는 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 는 연회색 띠 위에 경로, 제목, 리드, 한 줄 신뢰 정보(방패 아이콘 「기관 자료 6곳과 대조」 | 확인일 | 작성일 | 읽는 시간)를 세로선으로 나눠 놓고 대가성 문구가 따라와요. plain 은 흰 바탕에 「단계별 이유식」 알약과 큰 제목이 있고, 정보는 밑줄 친 「기관 자료 6곳과 대조」 뒤에 회색 글씨로 한 줄 이어져요. split 은 넓은 화면에서 왼쪽에 제목과 리드, 오른쪽에 「이 글의 확인 정보」 카드(참고한 자료·마지막 확인·작성·읽는 시간)가 놓여요.

신뢰 정보를 눈에 띄게 하려면 split, 가볍게 두려면 plain, 띠로 글 시작을 분명히 하려면 band 예요. band 와 plain 은 신뢰 정보가 대가성 문구보다 먼저 나와요. split 은 대가성 문구가 왼쪽 리드 아래에, 확인 정보 카드가 오른쪽 칸에 놓여요.

문서 사이트의 페이지 머리 말투를 따랐어요.

이럴 때 — 변형 3

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

항목 추가 요청

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