C Carbon · 07

Topic index

주제 목록

An editorial grid with the "Browse by topic" heading in a narrow left column and the content in a wide right column, each block marked by a thin top rule.

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 gives each topic a block with name, description, three posts and an "All 5 posts" link, two blocks per row on wide screens. index is a single table-like sheet: name, description, post count and arrow on one row, the whole row being the link. lead runs one row per topic: name and count on the left, the first post as a large thin title with its description in the middle, and the other two posts small on the right.

sections shows post titles right away, index is best for scanning many topics, and lead gives a magazine feel with a featured post per topic. lead is the longest, index the shortest.

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.