출처 상자

Trust box

「참고한 자료와 확인」. 출처 번호 목록이 카드(panel), 표(ledger), 작은 각주(notes) 중 하나로 나와요.

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

다른 이름: 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 은 방패 아이콘 제목과 번호 목록이 하나의 카드에 들어가고, 아래 선 뒤에 「편집 원칙」「의학 정보 면책 안내」 링크와 면책 문구가 와요. ledger 는 상자 없이 기관 | 자료 | 확인 날짜 표이고 줄마다 가는 선이 있어요. notes 는 위에 선 하나, 작은 회색 글씨 번호 목록과 링크가 바로 이어져요.

출처를 신뢰의 근거로 크게 보여 주려면 panel, 기관과 날짜를 훑게 하려면 ledger, 글 끝에 조용히 두려면 notes 가 맞아요. 세 변형 모두 출처가 같은 여섯 곳이에요.

panel 과 notes 에서는 출처 링크 옆에 새 창으로 열린다는 작은 아이콘이 붙어요.

이럴 때 — 변형 3

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