K KRDS · 15

출처 상자

Trust box

「참고한 자료와 확인」을 옅은 회색 둥근 상자의 번호 목록, 번호 없는 위아래 선 표, 작은 각주 목록 세 가지로 보여 줘요. 출처마다 확인일이 붙어요.

쓰는 규칙목록 표시는 출처에만 쓴다 — 검사가 목록 줄 수로 출처를 센다.

다른 이름: TrustBox
···
usage (Astro)
---
// src/pages/[post].astro
import { TrustBox } from '../components/registry';
---
<TrustBox sources={post.data.sources} checked={checked} aboutHref="/about/" disclaimerHref="/disclaimer/" medical={MEDICAL_NOTE} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "TrustBox": "panel" }
}
props (TypeScript)
export interface TrustBoxProps {
  sources: Source[];
  checked: Date;
  aboutHref: string;
  disclaimerHref: string;
  medical: string;
  variant?: VariantOf<'TrustBox'>;
}

panel 은 둥근 회색 상자에 제목, 「기관 자료 6곳과 대조했어요」 문장, 번호 목록(링크 아래 기관·확인일), 편집 원칙·면책 링크가 들어가요. ledger 는 상자 없이 위아래 선으로 기관 | 자료 링크 | 확인일을 한 줄씩 나란히 둬서 표처럼 읽혀요. notes 는 각주처럼 작은 글씨 번호 목록과 한 줄 메타예요.

출처가 많을수록 ledger 가 가장 정돈되고, notes 는 가장 작아 본문을 방해하지 않아요. panel 은 가장 길고 눈에 잘 띄어요.

「콘텐츠 정보」 표 말투는 KRDS 에서 가져온 것이고, 출처만 번호 목록으로 세는 규칙은 사이트 검사에 맞춘 것이에요.

이럴 때 — 변형 3

  1. panel상자 하나 출처가 두세 곳으로 적을 때 — 한 상자에 전부.쓰는 사이트 3곳: babyfood, babyplay, vaccination
  2. ledger장부 출처가 많고 기관마다 확인일을 보여 주는 게 중요할 때 — 기관 | 자료 | 확인일.쓰는 사이트 3곳: babysleep, birthprep, toddlerfood
  3. notes각주 글 끝을 가볍게 두고 싶을 때 — 각주처럼 작게.쓰는 사이트 5곳: babysick, feeding, milestone, newborn, 허브
페이지로 열기 ↗

항목 추가 요청

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