Post list

글 목록

A list of post cards. On the atlas screen it appears as a two-column numbered list.

RuleTwo columns when its spot is wide — it looks at the width of its container, not the screen.

Also known as: PostList

···

usage (Astro)

---
// src/pages/[post].astro
import { PostList } from '../components/registry';
---
<PostList heading="함께 읽으면 좋은 글" headingId="related" posts={related} />

props (TypeScript)

export interface PostListProps {
  posts: PostSummary[];
  heading?: string;
  headingId?: string;
  /** 목록 제목 단계(카드 제목은 그 아래 단계) */
  headingLevel?: 2 | 3;
  showCategory?: boolean;
  /** PostCard 변형 */
  variant?: VariantOf<'PostCard'>;
}

This component has no variants of its own and reuses the post card variants. On screen you see large gray numbers 01 to 06, titles, and date and reading time in two columns, with a thin line under each row. thumb places one to three cards per row depending on width.

How it looks depends on which post card variant you pick, so there is almost no reason to choose this component separately.

Row lists (list, number) split into two columns in wide spaces.

Use it when — Variants 1

defaultDefault Nothing to pick — it follows the post card variant.Every site — follows the post card variant

Same component, other packs

19Post list글 목록

19Post list글 목록

19Post list글 목록

Use it when — Variants 1