글 카드 — 디자인 팩 아틀라스

글 카드

Post card

타일은 모서리도 테두리도 없는 회색이고 오른쪽 아래에 파란 화살표가 있어요. 변형은 선으로 나뉜 줄(list), 글 속 도식을 잘라 얹은 그림 타일(thumb), 큰 가는 순번 줄(number)이에요.

쓰는 규칙카드 전체를 눌러도 되지만 링크는 제목 하나뿐이다. 그림이 없는 글에 그림을 지어 넣지 않는다.

다른 이름: PostCard

--- // design-systems/krds/components/PostList.astro // PostCard 은 이 파일 안에서 쓰인다(팩 구현끼리) --- <PostCard post={post} variant={variant} index={i + 1} headingLevel={cardLevel} showCategory={showCategory} />

export interface PostCardProps { post: PostSummary; headingLevel?: 2 | 3; showCategory?: boolean; /** number 변형의 순번(1부터) */ index?: number; /** 홈 대표 글처럼 크게 */ lead?: boolean; variant?: VariantOf<'PostCard'>; }

list는 주제 라벨, 굵은 제목, 두 줄 설명, 날짜가 한 줄 안에 있고 아래에 가는 선이 있어요. thumb는 회색 타일 위쪽에 글의 첫 도식 그림이 잘려서 보이고 그 아래에 제목과 설명, 오른쪽 아래에 파란 화살표가 있어요. 그림이 없는 글은 글자만 있는 타일이 돼요. number는 큰 가는 순번 옆에 제목과 날짜만 있어서 설명 없이 촘촘해요. 맨 아래 큰 타일은 대표 글(lead)이에요.

thumb는 그림이 카드의 절반을 차지하지만 도식 그림이 중간에서 잘려 내용을 다 못 읽어요. 글이 많고 빨리 훑게 하려면 number나 list가 좋아요. 사진이 아니라 글 속 도식이라 사진 위주 사이트처럼 화려해지지는 않아요.

이럴 때 — 변형 3

list글줄 설명을 읽고 고르게 하고 싶을 때 — 주제·제목·설명·날짜.쓰는 사이트 2곳: birthprep, milestone
thumb그림 도식 그림이 있는 글이 많을 때 — 글의 첫 그림을 작게(없으면 글자만).쓰는 사이트 4곳: babysick, babysleep, toddlerfood, 허브
number순번 글이 많아 촘촘하게 보여야 할 때, 순서대로 읽는 연재일 때.쓰는 사이트 5곳: babyfood, babyplay, feeding, newborn, vaccination

같은 컴포넌트, 다른 팩

18글 카드Post card

18글 카드Post card

18글 카드Post card

이럴 때 — 변형 3