C Carbon · 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는 줄 목록이에요. 표식, 이름과 소개, 오른쪽에 글 수가 오고 줄마다 얇은 선이 있어요. inline은 표식도 소개도 없이 「/」로 나눈 파란 링크 한 문단이에요. 셋 모두 제목이 왼쪽 좁은 칸에, 목록이 오른쪽 넓은 칸에 있어요.

다른 사이트로 방문자를 보내고 싶으면 cards가 가장 눈에 띄어요. 조용히 안내만 하려면 inline이에요. 사이트 구분은 이름에서 따온 두 글자 표식으로만 하므로, 사이트마다 색으로 구별하는 느낌을 원하면 이 팩은 맞지 않아요.

이럴 때 — 변형 3

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

항목 추가 요청

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