K KRDS · 07

주제 목록

Topic index

주제마다 위쪽에 회색 선을 긋는 주제 목록이에요. 주제마다 제목과 설명, 그리고 글 몇 편 또는 글 수가 붙어요.

쓰는 규칙대표 글은 여기에 다시 나오지 않는다 — 같은 글이 홈에 두 번 보이지 않게. 「찾기」 홈 머리와 「바로가기」 목록은 같은 링크라 함께 고르지 않는다.

다른 이름: 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 는 넓은 화면에서 3칸으로, 주제마다 이름·설명·글 3편 제목과 「글 5편 모두 보기 →」 파란 링크를 보여 줘요. index 는 한 줄에 주제 하나씩 이름·설명·글 수·꺾쇠만 있는 바로가기 줄이에요. lead 는 주제 이름을 왼쪽에, 첫 글을 크게 가운데에, 나머지 두 편을 오른쪽 밑줄 링크로 둬서 주제끼리 위아래로 쌓아요.

sections 는 한눈에 글이 많이 보이는 대신 높이가 길어요. index 가 가장 짧고 정돈돼 보이며, lead 는 주제마다 대표 글을 키워 줘서 글이 적을 때 알맞아요. 모두 선과 글자로만 구분하고 상자가 없어요. 색은 「모두 보기」 파란 링크에만 써요.

이럴 때 — 변형 3

  1. sections주제마다 글 3편 주제마다 글이 세 편 넘게 고르게 있을 때.쓰는 사이트 4곳: babyplay, babysleep, birthprep, newborn
  2. index바로가기 줄 주제가 많고, 글은 주제 페이지에서 보게 하고 싶을 때 — 이름·설명·글 수만.쓰는 사이트 4곳: babyfood, feeding, milestone, vaccination
  3. lead첫 글 크게 주제마다 대표 글이 뚜렷할 때 — 첫 글 크게, 두 편 작게.쓰는 사이트 3곳: babysick, toddlerfood, 허브
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.