Design Pack Atlas
한국어
K KRDS · 15

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

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 →

···

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

···

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 a heading, the sentence "checked against 6 institutional sources", a numbered list (institution and date under each link), and links to editorial principles and the disclaimer in a rounded grey box. ledger drops the box and lays out institution | source link | check date one row at a time between rules, so it reads like a table. notes is a small-print numbered list like footnotes with one meta line.

The more sources, the tidier ledger looks; notes is smallest and least intrusive; panel is longest and most visible.

The content-information table style comes from KRDS; counting only sources as list items matches the site checks.

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.