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

글 카드

Post card

게시판 목록처럼 선으로 나뉜 줄이에요. 파란 주제 글자, 굵은 제목, 설명, 날짜 순이고 대표 글은 테두리 상자로 커져요.

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

다른 이름: 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 는 왼쪽 굵은 01·02 번호 열에 제목과 주제·날짜만 두고 설명이 없어요.

세 변형 모두 맨 아래 대표 글이 테두리 상자로 크게 보여요. 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