Related sites

함께 보는 사이트

Sister sites appear as bordered cards, each with a blue square mark, a blue name, an intro and a post count.

RuleSites are told apart by a monogram and their name — never by giving each site its own color.

Also known as: 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 gives each box a blue square mark, a blue name, an intro and “n posts”; on wide screens several sit on one row (three in the demo). list stacks rows in one box with a count badge on the right of mark, name and intro. inline has no marks, just links joined by middle dots in one paragraph.

To introduce sites prominently use cards; to save space, list or inline. All marks are the same blue, so sites cannot be told apart by color and names matter. Column count avoids a lone card on the last row (3 or 6 sites use three columns, otherwise two).

The card follows the look of GitHub’s pinned repositories.

Use it when — Variants 3

cardsCards When there are 3–6 sites and each deserves a one-line blurb.Used by 4: babyplay, birthprep, milestone, 허브
listList When there are many sites, or post counts should be compared side by side.Used by 4: babyfood, babysick, babysleep, feeding
inlineInline When the bottom of the home page should stay short — links inside one paragraph.Used by 3: newborn, toddlerfood, vaccination