K KRDS · 17

Product list

추천 준비물

Shows recommended items without looking like ads. An outlined affiliate-note box comes first; links are quiet buttons or blue text.

RuleThe affiliate disclosure sits right above the product block, links are marked as sponsored, and items without a real link stay plain text.

Also known as: ProductList
···
usage (Astro)
---
// src/pages/[post].astro
import { ProductList } from '../components/registry';
---
<ProductList items={products} disclosure={AFFILIATE_DISCLOSURE} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "ProductList": "rows" }
}
props (TypeScript)
export interface ProductListProps {
  items: Product[];
  /** 대가성 문구 — 상품 블록(data-product-block) 바로 앞 형제 요소에 있어야 한다(seo:audit) */
  disclosure: string;
  variant?: VariantOf<'ProductList'>;
}

rows is a rounded bordered list with name and reason on the left and an outlined "View on Coupang" button on the right. table is a table headed Item | Why you need it with a link column on the right (no visible heading), a grey header row and underlined blue links. checklist stacks empty decorative checkboxes with name and reason and an underlined link below, separated by rules.

table is densest and checklist longest. Even rows uses outline buttons rather than blue fills, so it is less eye-catching. In every variant the affiliate note appears right before the list in the same look.

The empty boxes are decoration and cannot actually be ticked.

Use it when — Variants 3

  1. rowsRows When there are two or three items — a quiet button on each row.Used by 3: babyplay, babysick, feeding
  2. tableTable When the reason matters — item | why you need it | link.Used by 5: babysleep, milestone, newborn, vaccination, 허브
  3. checklistChecklist Packing-list posts such as birth prep — empty checkboxes and text links.Used by 3: babyfood, birthprep, toddlerfood
Open as page ↗

Suggest an entry

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