Design Pack Atlas
한국어
P Primer · 18

Post 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.

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 →

···

KRDS

18Post card글 카드

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

···

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 stacks title, two lines of description, then topic label, a clock icon with reading time, and date. thumb adds the post’s first diagram as a small picture on the right; posts without one show text only. number has a large grey number cell on the left with title and meta only, no description, so it is compact. The home featured post appears in all three as a larger title and description inside a bordered box.

If the description should be read, list; to tell posts apart by picture, thumb; to stack many for quick scanning, number. The thumb picture is a diagram from the post, so its text is tiny and only the shape reads at that size.

Rows are divided by lines alone, and the blue title catches the eye first.

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.