K KRDS · 10

글 머리

Post header

제목과 요약 아래에 「기관 자료 6곳과 대조 · 마지막 확인」을 두고, 대가성 문구는 테두리 상자에 작지만 읽히는 글씨로 조용히 넣어요.

쓰는 규칙신뢰 줄(기관 자료 몇 곳과 대조·마지막 확인일)이 대가성 문구보다 먼저 나오고, 대가성 문구는 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 은 흰 바탕에 파란 주제 글자와 아주 큰 제목을 두고 기관 자료·마지막 확인·작성일·읽는 시간을 세로선으로 나눈 한 줄을 둬요. split 은 넓은 화면에서 왼쪽에 제목·요약, 오른쪽에 「이 글의 확인 정보」 표(참고한 자료·마지막 확인·작성·읽는 시간)가 둥근 상자로 놓여요.

세 변형 모두 신뢰 정보가 대가성 문구보다 앞에 오고 더 진해요. 의학 정보 글에 잘 맞고, 정보가 가장 정돈돼 보이는 건 split 이에요.

오른쪽 표는 KRDS 의 콘텐츠 정보 상자를 따랐어요.

이럴 때 — 변형 3

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

항목 추가 요청

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