S shadcn · 08

Related sites

함께 보는 사이트

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

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 shows three cards side by side with a border and a faint shadow, each with a mark, name, one-line description and a chevron on the right. list drops the boxes: mark, name, description and the post count (16) on the right, one row per site with thin lines, in two columns. inline is a single sentence, “Made with the same editorial principles:”, with underlined links.

Pick cards to make sister sites stand out, list to show post counts, inline to avoid looking like advertising. Because every mark is the same black, individual site personality does not show.

Site cards on the page appear only in the cards variant.

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.