P Primer · 17

Product list

추천 준비물

Links are light-grey “View on Coupang” buttons (with an external-link icon) or blue text inside a table or checklist. No green accent button is used.

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 shows, per row in a box, the product name and reason with a grey “View on Coupang” button (external-link icon) on the right. table is a three-column table: “Item” and “Why you need it” have headers, while the rightmost link column has no visible header, just a blue “View on Coupang” text link; lines on every cell and light-grey even rows. checklist has an empty square box per row with name and reason, and the link as small blue text without a button.

If you want links to draw less attention, checklist is the quietest; to make the click target clear, rows. table columns can get narrow on phones. Products without a link appear only as an item row.

Links carry a marker that tells search engines they are ad links. It is not visible on screen.

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.