Design Pack Atlas
한국어
C Carbon · 09

Hub directory

허브 사이트 목록

Lists the sites in baby-stage order (before birth, first 100 days, …) as numbered rows, a grey-headed table, or a horizontal step line.

RuleEach stage has an anchor, so the stage links in the hero jump straight to it.

Also known as: HubDirectory
···
usage (Astro)
---
// src/pages/index.astro
import { HubDirectory } from '../components/registry';
---
<HubDirectory stages={stageGroups} empty="첫 사이트를 준비하고 있어요. 곧 이곳에서 주제별 사이트를 고를 수 있어요." />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "HubDirectory": "stages" }
}
props (TypeScript)
export interface HubDirectoryProps {
  stages: HubStage[];
  /** 사이트가 하나도 없을 때 문장 */
  empty: string;
  variant?: VariantOf<'HubDirectory'>;
}

See all four packs side by side →

···

KRDS

09Hub directory허브 사이트 목록

Lists sites in baby-stage order (before birth, first 100 days, and so on). Each stage has a number: blue text in the list and table, a boxed number in the vertical steps.

···

Primer

09Hub directory허브 사이트 목록

Each baby stage gets a heading with its sites as box rows beneath. There are also table and vertical-steps versions.

···

shadcn/ui

09Hub directory허브 사이트 목록

Groups sites by baby stage. Each stage has a small number and a large name; sites appear as cards, a table or a vertical line.

stages gives each stage a row: a large thin number and the stage name on the left, site tiles on the right, a thin rule above each row. table is one sheet with a grey header row (Stage, Site, What it covers, Posts) and merged stage cells. timeline hangs rings on a horizontal step line on wide screens with each stage’s site links listed beneath, and turns vertical on a phone.

It is meant for hubs of around ten sites chosen by baby stage. stages shows site intros most prominently, table fits everything in one view, timeline stresses that the order is a time flow. In stages many rows hold only one or two tiles, so the right side looks empty.

Use it when — Variants 3

  1. stagesStages When each stage has two or more sites — stage | site boxes.Used by 4: babyfood, birthprep, milestone, newborn
  2. tableTable When at-a-glance comparison matters most — stage | site | what’s inside | posts.Used by 3: babyplay, babysick, toddlerfood
  3. timelineTimeline When the order of stages (pregnancy → newborn → first year) is the key information.Used by 4: babysleep, feeding, 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.