K KRDS · 17

추천 준비물

Product list

추천 준비물을 광고처럼 튀지 않게 보여 줘요. 위에 테두리 있는 대가성 문구 상자가 먼저 오고, 링크는 조용한 버튼이나 파란 글자예요.

쓰는 규칙대가성 문구가 상품 묶음 바로 위에 붙어 있고, 링크는 광고 링크로 표시한다. 실제 링크가 없는 준비물은 글자로만 둔다.

다른 이름: 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 는 둥근 테두리 목록에서 이름·이유 왼쪽, 오른쪽에 테두리 있는 「쿠팡에서 보기」 버튼이 있어요. table 은 「준비물」「왜 필요한가요」 머리 오른쪽에 링크 칸이 붙는 표이고(링크 칸 머리는 글자 없음), 머리 줄이 회색이며 링크는 밑줄 파란 글자예요. checklist 는 장식용 빈 네모 칸과 이름·이유, 그 아래 밑줄 링크를 선으로 나눠 쌓아요.

table 이 가장 촘촘하고 checklist 가 가장 길어요. 버튼이 있는 rows 도 파란 채움이 아닌 외곽선이라 눈에 덜 띄어요. 어느 변형이든 대가성 문구는 목록 바로 앞에 같은 모양으로 보여요.

빈 네모 칸은 실제로 체크되지 않는 장식이에요.

이럴 때 — 변형 3

  1. rows목록 준비물이 두세 개일 때 — 줄마다 조용한 버튼.쓰는 사이트 3곳: babyplay, babysick, feeding
  2. table표 왜 필요한지 설명이 중요할 때 — 준비물 | 왜 필요한가요 | 링크.쓰는 사이트 5곳: babysleep, milestone, newborn, vaccination, 허브
  3. checklist체크리스트 출산 준비물처럼 챙길 것 목록일 때 — 빈 칸과 글자 링크.쓰는 사이트 3곳: babyfood, birthprep, toddlerfood
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.