Post list

글 목록

Rows with a big thin numeral and a rule above each sit in two columns where there is room. With picture cards, grey tiles are joined by thin white gaps.

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'>;
}

With thumb cards, grey tiles are separated by 2px white gaps so they read as a card group, and on wide spots they split into two or three columns. list and number cards are row lists that become two columns where there is room. The demo shows six number cards in two columns.

Column count follows the width of the spot the list sits in, not the screen, so it narrows inside body text. It has no variants, so the differences between packs show up in the post card.

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