Post list

글 목록

Rows stack inside one bordered box, and in a wide space the box splits into two columns like a grid.

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

There are no variants; it follows whichever post card look the site chose. In the demo, large grey numbers, titles and clock-icon reading-time-and-date rows came out in pairs across two columns. A title, if given, goes in the grey header row at the top of the box. It becomes two columns when the space it sits in is 880px or wider.

For category pages with many posts or the “new posts” list of a 404, it looks tidy like one table with a center line.

Related posts, categories and 404 all share this list look.

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