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

글 카드

Post card

굵은 제목 위에 작은 회색 주제, 아래에 회색 설명과 날짜가 와요. 줄은 가는 선으로만 나뉘고, 그림 카드(thumb)만 테두리와 옅은 그림자가 있어요.

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

다른 이름: PostCardCard

--- // 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 는 홈 대표 글용으로 제목이 가장 크고 「읽어 보기」 링크가 있어요.

글 설명을 읽게 하려면 list, 그림으로 끌려면 thumb, 많은 글을 짧게 보이려면 number 예요. thumb 의 그림은 카드 높이에 맞춰 아래가 잘려서 도식 일부만 보여요.

카드 전체가 눌리지만 링크는 제목 하나이고, 그림이 없는 글은 글자 카드로 나와요. 대표 글 카드 위쪽 색 띠는 일부러 뺐어요.

이럴 때 — 변형 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