Product list — Design Pack Atlas

Product list

추천 준비물

Coupang links kept low-key. The disclosure comes first in a bordered box, and links can be outlined blue buttons, links in a table, or links under checklist items.

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

export interface ProductListProps { items: Product[]; /** 대가성 문구 — 상품 블록(data-product-block) 바로 앞 형제 요소에 있어야 한다(seo:audit) */ disclosure: string; variant?: VariantOf<'ProductList'>; }

rows puts the product name and reason on the left and an outlined blue "View on Coupang" button on the right (label left, external-link icon at the far right, no fill). table uses a grey header row (Item, Why you need it) with the link as text in the right column. checklist writes the name and reason next to an empty square, with a text link underneath.

For visible links, rows; to feel least like an ad, table or checklist. The checklist squares are drawn as empty checkboxes.

Products without a link appear only as an item row. Each link also carries a "new window, ad link" note, but it is read aloud by screen readers and is not visible on screen.

Use it when — Variants 3

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

Same component, other packs

17Product list추천 준비물

17Product list추천 준비물

17Product list추천 준비물

Use it when — Variants 3