Design Pack Atlas
한국어
K KRDS · 18

Post card

글 카드

Rows separated by lines, like a bulletin board. Blue topic label, bold title, description, date; the lead post grows into a bordered box.

RuleThe whole card is clickable, but the title is the only link. Posts without a picture never get an invented one.

Also known as: PostCard
···
usage (Astro)
---
// design-systems/krds/components/PostList.astro
// PostCard 은 이 파일 안에서 쓰인다(팩 구현끼리)
---
<PostCard post={post} variant={variant} index={i + 1} headingLevel={cardLevel} showCategory={showCategory} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "PostCard": "list" }
}
props (TypeScript)
export interface PostCardProps {
  post: PostSummary;
  headingLevel?: 2 | 3;
  showCategory?: boolean;
  /** number 변형의 순번(1부터) */
  index?: number;
  /** 홈 대표 글처럼 크게 */
  lead?: boolean;
  variant?: VariantOf<'PostCard'>;
}

See all four packs side by side →

···

Primer

18Post card글 카드

Like a search-result row: blue title, grey description and a small icon meta row. Rows sit in a list box, while the home featured post gets its own bordered box and larger type.

···

Carbon

18Post card글 카드

Tiles are plain grey with no rounded corners or border, and a blue arrow at the bottom right. The variants are rows divided by rules (list), a tile with the post’s diagram cropped on top (thumb), and a big thin-numeral row (number).

···

shadcn/ui

18Post card글 카드

A small gray topic sits above a bold title, with a gray description and the date below. Rows are separated by thin lines only; just the picture card (thumb) has a border and a faint shadow.

list shows, per row, a blue topic, bold title, two lines of description, and date with reading time. thumb adds the post’s first diagram as a small picture on the left and trims the description to one or two lines; the lead post appears as a box with a larger diagram on the right. number has a bold 01, 02 number column with title, topic and date only — no description.

In all three, the lead post at the bottom shows as a large bordered box. number is densest; thumb suits posts with diagrams, though the thumbnail is too small to read its text.

Posts without a diagram do not get an invented one.

Use it when — Variants 3

  1. listList When readers should choose by reading the blurb — topic, title, blurb, date.Used by 2: birthprep, milestone
  2. thumbThumbnail When many posts have diagrams — the post’s first diagram, small (text only if there is none).Used by 4: babysick, babysleep, toddlerfood, 허브
  3. numberNumber When there are many posts to show densely, or a series meant to be read in order.Used by 5: babyfood, babyplay, feeding, newborn, vaccination
Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.