글 머리 — 디자인 팩 아틀라스

글 머리

Post header

「기관 자료 6곳과 대조」와 「확인 날짜」를 제목 아래 줄이나 옆 칸 표로 먼저 보여 주고, 쿠팡 파트너스 문구는 테두리 상자 한 줄로 조용히 놓여요.

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

다른 이름: PostHeader

--- // 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} />

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은 회색 띠를 두 칸으로 나눠 왼쪽에 제목·요약, 오른쪽에 흰 상자 「이 글의 확인 정보」(라벨과 값이 줄로 나뉜 표)를 놓아요.

건강 정보라 출처와 확인 날짜를 앞에 내세우는 구성이에요. band가 가장 짧고, split은 확인 정보를 표로 보여 줘 신뢰감을 주지만 좁은 폰에서는 한 칸으로 접혀요. 광고 문구보다 확인 정보가 위에서 더 진하게 보이게 한 게 이 팩의 의도예요.

이럴 때 — 변형 3

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

같은 컴포넌트, 다른 팩

10글 머리Post header

10글 머리Post header

10글 머리Post header

이럴 때 — 변형 3