Design Pack Atlas
한국어
P Primer · 15

Trust box

출처 상자

A box like a repository file list: a shield-icon header row, with sources as numbered rows beneath.

RuleList markup is used for sources only — the audit counts sources by list items.

Also known as: 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'>;
}

See all four packs side by side →

···

KRDS

15Trust box출처 상자

Shows "Sources and checks" as a numbered list in a rounded light-grey box, an unnumbered ledger between two rules, or small footnotes. Each source carries its check date.

···

Carbon

15Trust box출처 상자

Sources appear as a numbered list in a borderless grey box (panel), a three-column table "Institution ｜ Source ｜ Checked" (ledger), or small footnotes under a single rule (notes).

···

shadcn/ui

15Trust box출처 상자

“Sources and checks”. The numbered source list appears as a card (panel), a table (ledger) or small footnotes (notes).

panel runs from a grey header row (“Sources and checks”) to a “Checked against 6 official sources” summary, numbered source rows, and finally “Editorial policy” and “Medical disclaimer” links with the disclaimer sentence. Each source has the organization and check date in small text. ledger has three cells per row, Organization | Document | Checked, with the date at the right edge. notes drops the box and uses a small numbered list under a top line, like footnotes.

For posts with many sources ledger looks tidiest; to keep the end of a post light, notes. panel is large and has presence. Titles of foreign sources stay in English.

Use it when — Variants 3

  1. panelPanel When there are only two or three sources — everything in one box.Used by 3: babyfood, babyplay, vaccination
  2. ledgerLedger When there are many sources and each check date matters — institution | document | checked.Used by 3: babysleep, birthprep, toddlerfood
  3. notesNotes When the end of the post should stay light — small, like footnotes.Used by 5: babysick, feeding, milestone, newborn, 허브
Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.