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

글 카드

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는 제목, 설명 2줄, 주제 이름표·시계 아이콘 읽는 시간·날짜 순으로 쌓여요. thumb는 오른쪽에 글의 첫 도식 그림을 작게 붙이고, 그림이 없는 글은 글자만 나와요. number는 왼쪽 큰 회색 순번 칸에 제목과 메타만 있고 설명이 없어서 촘촘해요. 홈 대표 글은 세 변형 모두 테두리 상자 안에서 더 큰 제목과 설명으로 나와요.

설명까지 읽혀야 하면 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