Design Pack Atlas
한국어
C Carbon · 15

Trust 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).

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.

···

Primer

15Trust box출처 상자

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

···

shadcn/ui

15Trust box출처 상자

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

panel puts everything in one grey box: a shield heading, summary, a numbered list (external-link icon after each link, institution and check date on the line below), editorial-policy links and the medical disclaimer. ledger has no box: a header row "Institution | Source | Checked" and a rule under every row, so sources compare at a glance. notes is a small numbered list under one top rule, with institution and date on the same line after each link.

With six sources, panel is the longest. To show your evidence plainly, ledger fits; to stay out of the text’s way, notes.

All three variants end with "Editorial policy / Medical disclaimer" links and the disclaimer text.

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.