Related sites

함께 보는 사이트

Shows "More parenting sites" with a blue monogram mark and name. Sites are not colour-coded.

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 puts mark, name, one-line description and a chevron in bordered, rounded boxes across columns. list shows mark, name and description with "16 posts" at the right in ruled rows, in two columns on wide screens. inline is one line of underlined links joined by middle dots, with no mark.

cards advertises the other sites most; inline is quietest. With many sites, list stays tidy. Every site has the same blue mark, so only the name tells them apart.

Not using per-site colours is a choice of this pack.

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

Same component, other packs

08Related sites함께 보는 사이트

08Related sites함께 보는 사이트

08Related sites함께 보는 사이트

Use it when — Variants 3