Design Pack Atlas
한국어
P Primer · 09

Hub directory

허브 사이트 목록

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

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

Also known as: HubDirectoryTimeline
···
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.

···

Carbon

09Hub 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.

···

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 puts a numbered heading such as “01 Before birth” with a description, then a line and boxes of site rows (mark, blue name and intro, count badge). table is one four-column table (Stage | Site | What it covers | Posts) with lines on every cell and light-grey even rows. timeline puts numbered circles on a vertical line on the left, with site rows on the right that have no marks, just a blue name and intro and a count badge.

If the hub should guide a flow, stages or timeline fit; to compare everything on one screen, table. The table can get narrow on phones. The stage links in the home head jump to the matching stage in this list.

The timeline variant uses Primer’s Timeline look.

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.