Design Pack Atlas
한국어
C Carbon · 08

Related sites

함께 보는 사이트

Grey tiles with a site badge, name and one-line intro. It can shrink to rows or to links inside a sentence. There are no per-site colours; every badge is the same blue.

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'>;
}

See all four packs side by side →

···

KRDS

08Related sites함께 보는 사이트

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

···

Primer

08Related sites함께 보는 사이트

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

···

shadcn/ui

08Related sites함께 보는 사이트

“Sister parenting sites”. Each site has a black rounded lettered mark, and no site colors are used.

cards lays grey tiles side by side with white gaps and a blue arrow at each tile’s bottom right. list is rows: badge, name and intro, post count on the right, a thin rule between rows. inline has no badge or intro: just blue links in one sentence separated by "/". In all three the heading is in a narrow left column and the list in a wide right one.

cards is the most eye-catching way to send visitors elsewhere; inline is the quietest. Sites are told apart only by a two-character badge taken from the name, so if you want colour-coded sites, this pack is not the one.

Use it when — Variants 3

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

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.