K KRDS · 08

함께 보는 사이트

Related sites

「함께 보는 육아 사이트」를 파란 모노그램 표식과 이름으로 보여 줘요. 사이트마다 색을 달리하지 않아요.

쓰는 규칙사이트는 모노그램(이름 글자 표식)과 이름으로 구분한다 — 사이트마다 다른 색을 쓰지 않는다.

다른 이름: RelatedSites
···
usage (Astro)
---
// src/pages/index.astro
import { RelatedSites } from '../components/registry';
---
<RelatedSites heading="함께 보는 육아 사이트" sites={related} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "RelatedSites": "cards" }
}
props (TypeScript)
export interface RelatedSitesProps {
  heading: string;
  sites: SiteLink[];
  variant?: VariantOf<'RelatedSites'>;
}

cards 는 테두리와 둥근 모서리가 있는 상자 여러 칸에 표식·이름·한 줄 소개·꺾쇠가 들어가요. list 는 표식과 이름·소개, 오른쪽 「글 16편」을 선으로 나눈 줄로 보여 주고 넓은 화면에서 두 칸이에요. inline 은 표식 없이 밑줄 링크를 가운뎃점으로 이은 한 줄이에요.

cards 는 다른 사이트를 가장 눈에 띄게 알리고, inline 은 가장 조용해요. 사이트가 많을수록 list 가 정돈돼요. 모든 사이트가 같은 파란 표식이라 사이트 구분은 이름 글자로만 해요.

사이트별 색을 쓰지 않는 건 이 팩의 선택이에요.

이럴 때 — 변형 3

  1. cards상자 사이트가 3~6곳이고 한 줄 소개를 보여 주고 싶을 때.쓰는 사이트 4곳: babyplay, birthprep, milestone, 허브
  2. list줄 사이트가 많거나 글 수를 나란히 비교하게 하고 싶을 때.쓰는 사이트 4곳: babyfood, babysick, babysleep, feeding
  3. inline문단 홈 아래를 짧게 끝내고 싶을 때 — 한 문단 안의 링크로.쓰는 사이트 3곳: newborn, toddlerfood, vaccination
페이지로 열기 ↗

항목 추가 요청

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