Design Pack Atlas
한국어
S shadcn · 15

Trust box

출처 상자

“Sources and checks”. The numbered source list appears as a card (panel), a table (ledger) or small footnotes (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.

···

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

panel puts a shield-icon title and the numbered list in one card, followed after a line by “Editorial principles” and “Medical disclaimer” links and the disclaimer text. ledger is a boxless table of institution | source | check date with a thin line per row. notes has one line on top, then a numbered list in small gray text with the links directly after.

Pick panel to present sources as proof of trust, ledger to let readers scan institutions and dates, and notes to leave them quietly at the end. All three show the same six sources.

In panel and notes, each source link has a small icon beside it showing that it opens in a new window.

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.