Design Pack Atlas
한국어
S shadcn · 18

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

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

Also known as: PostCardCard
···
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.

···

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

list divides topic, title, two lines of description and date with a thin line per row. thumb shows the post’s first diagram, cropped, on top of a card with a border and a faint shadow, with title and description below. number has only a large gray number plus title, a small topic and the date, so it is the densest. lead is for the featured post on the home page, with the largest title and a “Read” link.

Use list to let readers read descriptions, thumb to attract with images, and number to show many posts compactly. In thumb the picture is cut at the bottom to fit the card height, so only part of the diagram is visible.

The whole card is clickable while only the title is the link, and posts without a picture become text cards. The colored bar on top of the featured card was left out on purpose.

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.