K KRDS · 07

Topic index

주제 목록

A topic list with a grey rule above each topic. Each topic carries a title and description, plus a few posts or just a count.

RuleThe featured post is not repeated here, so no post appears twice on the home page. The “finder” hero and the “index” list hold the same links, so they are never picked together.

Also known as: TopicIndex
···
usage (Astro)
---
// src/pages/index.astro
import { TopicIndex } from '../components/registry';
---
<TopicIndex heading="주제별로 보기" topics={await topics(featured)} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "TopicIndex": "sections" }
}
props (TypeScript)
export interface TopicIndexProps {
  heading: string;
  topics: Topic[];
  variant?: VariantOf<'TopicIndex'>;
}

sections uses three columns on wide screens, each showing the topic name, description, three post titles and a blue "All 5 posts" link. index is a shortcut list, one topic per row with name, description, count and a chevron only. lead puts the topic name on the left, the first post large in the middle and the other two as underlined links on the right, topics stacked vertically.

sections shows many posts at once but gets tall. index is shortest and tidiest, and lead enlarges one post per topic, which suits sites with few posts. Everything is separated by rules and text with no boxes; the only colour is the blue "view all" links.

Use it when — Variants 3

  1. sectionsSections When every topic has three or more posts.Used by 4: babyplay, babysleep, birthprep, newborn
  2. indexIndex When there are many topics and posts should be browsed on topic pages — name, blurb and count only.Used by 4: babyfood, feeding, milestone, vaccination
  3. leadLead When each topic has a clear lead post — one big, two small.Used by 3: babysick, toddlerfood, 허브
Open as page ↗

Suggest an entry

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