Open터미널 열기
마크다운으로 복사링크 공유

카드 골격

모든 카드는 테두리 없는 면 + CardHead(카드 안 맨 위: 제목·부제 · 오른쪽 조작)로 짜요. 세그먼트·토글도 함께 있어요.

모바일PCPleos · 개발 중CardHead · CardBar · Seg · CollapsibleSeg · WidgetHead · Toggle · PeriodToggle · CardBox · Card관련 스위치 · 밑줄 탭 · 배지
플랫폼
폰 브라우저·홈 화면 앱(767px 이하)

고르기#

이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.

언제 쓰나#

  • 내용을 담는 면은 모두 Card - 테두리 없는 면 + 제목(CardHead)이고, 조작은 제목 줄 오른쪽(넓으면 아랫줄), 카드 밖 CardBar는 나란한 칸 윗선 맞춤(spacer)에만 써요. 세그먼트(Seg)·접는 세그먼트(Seg collapse)도 여기 있어요.

쓰지 말아야 할 때 · 대신 쓸 것#

여기로 합친 이름#

아래 이름들은 이 부품의 별칭·프리셋이에요. 새로 쓸 때는 Card를 써요.

사용 예제#

할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.

카드 하나 만들기#

제목이 있으면 조작(bar)은 제목 줄 오른쪽 끝에 앉아요. 세그먼트를 눌러 보세요.

부품 따로 조립하기#

Card가 맞지 않는 자리에서만 CardBox·CardHead를 직접 써요. 조작은 CardHead right에 둬요.

세그먼트로 보기 바꾸기#

둘 이상 중 하나를 고르는 토글은 Seg 하나로 그려요.

작은 위젯 머리 달기#

해부도#

  1. 1

    카드 면

    안쪽 여백 16px(640px 이상 20px)이에요.

  2. 2

    제목

    CardHead의 제목이에요. 한 줄, 넘치면 말줄임이에요.

  3. 3

    부제

    두 줄까지 보여요.

  4. 4

    조작

    bar로 넘기면 제목 줄 오른쪽 끝에 앉아요.

속성#

Seg Size#

sm은 카드 조작, md는 페이지 머리예요.

인터페이스#

타입에서 자동으로 뽑은 표예요.

CardHead#

속성기본값타입설명
title*-ReactNode마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요.
sub-ReactNode제목 아래 한 줄이에요.
right-ReactNode오른쪽 끝에 둘 조작이에요.
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
icon-ReactNode제목 앞 로고·아이콘(리블 AI 로고 등) - 2026-11-13 정리 1단계에서 더함(아직 부르는 곳 없음 → 모양 변화 0)
size'lg''sm' | 'lg'lg = 카드 제목(18px) · sm = 작은 위젯 제목(WidgetHead와 같은 모양)

CardBar#

속성기본값타입설명
left-ReactNode왼쪽에 둘 내용이에요.
right-ReactNode오른쪽 끝에 둘 조작이에요.
spacer-boolean
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.

Seg#

속성기본값타입설명
value*-T지금 값이에요.
onChange*-(v: T) => void값이 바뀌면 새 값으로 불러요.
options*-readonly (readonly [T, string] | readonly [T, string, string])[][값, 이름] 목록이에요.
label-stringxs = 표 머리·정렬 칩 옆처럼 글자 한 줄 높이 안에 들어가는 자리(㎡/평 UnitSeg) - 2026-11-13 DS 4차 남은 것
size'sm''sm' | 'md' | 'xs'크기예요.
wrap-boolean
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
flip-boolean데드 클릭 실측: '평' 3.8%·'㎡' 6.2%가 이미 선택된 칸을 누른 것이었다
collapse-'menu' | 'auto' | 'always' | 'menu-always'좁을 때 접기.

CollapsibleSeg#

속성기본값타입설명
value*-T지금 값이에요.
onChange*-(v: T) => void값이 바뀌면 새 값으로 불러요.
options*-readonly (readonly [T, string] | readonly [T, string, string])[][값, 이름] 목록이에요.
label-string화면 읽기 프로그램이 읽는 이름(aria-label)이에요.
size'sm''sm' | 'md'크기예요.
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
alwaysCollapse-boolean같은 토글이 이 물건에선 알약 하나로, 저 물건에선 펼친 세그로 보이면 같은 것으로 안 읽힌다.
menu-booleanPC 기본 경로는 우측으로 펼쳐지는 인라인 세그라 옵션이 늘어난 만큼 줄이 옆으로 자란다.
flip-boolean2칸일 때만 뜻이 있다 - Seg의 flip으로 그대로 넘긴다.

WidgetHead#

속성기본값타입설명
title*-ReactNode마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요.
right-ReactNode오른쪽 끝에 둘 조작이에요.
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.

Toggle#

속성기본값타입설명
on*-boolean켜졌는지예요.
onClick*-() => void누르면 불러요.
title-string마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요.
onColor-string
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
children*-ReactNode안에 그릴 내용이에요.

PeriodToggle#

속성기본값타입설명
value*-number지금 값이에요.
onChange*-(m: number) => void값이 바뀌면 새 값으로 불러요.
periods*-[number, string][]

CardBox#

속성기본값타입설명
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.
tone'plain'CardTone색의 뜻이에요.
density'default'CardDensity
as'div''div' | 'section'바깥 요소 - 글 구조상 묶음이면 section(상세 카드 일부가 원래 section이었다)
children*-ReactNode안에 그릴 내용이에요.

Card#

속성기본값타입설명
title-ReactNode마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요.
sub-ReactNode제목 아래 한 줄이에요.
bar-ReactNode
barLeft-ReactNode
barClass-string
boxClass주의-string
headRight-ReactNode
tone'plain'CardTone박스 톤(기본 plain) · 여백(기본 default) · 제목 앞 아이콘 · 제목 크기(lg 18px · sm 위젯 12px) - 2026-11-13 더함
density'default''default' | 'compact'
icon-ReactNode라벨 앞에 놓을 아이콘이에요.
headSize-'sm' | 'lg'
children*-ReactNode안에 그릴 내용이에요.

* 필수예요. 표는 타입에서 자동으로 뽑았어요.

스펙#

상태 · 슬롯마다 실제로 그려지는 값이에요.

Card#

CardBar#

base

상태슬롯속성값
enabledroot바깥 아래 여백8px
최소 높이36px
left최소 폭0px
간격6px
right간격8px

CardHead#

base

상태슬롯속성값
enabledroot바깥 아래 여백8px
최소 폭0px
가로 간격8px
줄 간격6px
title넘침말줄임(…)
글자 크기t-headline
굵기800
글자색ink
sub바깥 위 여백2px
최대 줄 수2줄
글자 크기t-cap
글자색dim
right간격8px

Seg#

base

상태슬롯속성값
enabledroot배경색chip
안쪽 여백3px
label좌우 여백6px
글자 크기t-micro
굵기700
글자색dim
option줄바꿈안 함
굵기700
전환 대상색·눌림 크기
pressedoption크기 배율(기본)0.975 · 버튼 공통 규칙

wrap=true

상태슬롯속성값
enabledroot간격4px

size=md

상태슬롯속성값
enabledroot모서리radius-xl
option모서리9px
좌우 여백14px
위아래 여백6px
글자 크기t-label

size=xs, size≠md=true

상태슬롯속성값
enabledroot모서리radius-md
안쪽 여백1px
option모서리radius-sm
좌우 여백6px
위아래 여백2px
글자 크기t-micro
행간1
enabled · 폰(767px 이하)option좌우 여백8px
위아래 여백4px

size≠md=true, size≠xs=true

상태슬롯속성값
enabledroot모서리radius-lg
option모서리radius-md
좌우 여백10px
위아래 여백4px
글자 크기t-cap
enabled · 폰(767px 이하)option좌우 여백12px
위아래 여백6px

selected=true

상태슬롯속성값
enabledoption배경색bg
글자색ink
그림자shadow-sm

selected=false

상태슬롯속성값
enabledoption글자색sub
hoveroption글자색ink

값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.

접근성#

역할과 속성#

요소역할 · 속성
CardHead 제목h2
Segradiogroup · aria-label=label
Seg 칸button · role="radio" · aria-checked
Togglebutton · role="switch" · aria-checked
빈 CardBararia-hidden

키보드#

키동작
TabSeg의 칸마다 옮겨요
Enter · Space골라요

화면 읽기 프로그램#

  • Seg에 label을 주면 "거래 종류, 라디오 그룹"으로 읽혀요.

초점#

  • 폰에서 Seg 칸은 여백이 커져 누르기 쉬워요.

가이드라인#

언제 쓰나요#

  • 새 카드를 만들 때는 Card 하나로 시작해요.

이렇게 써요#

쓰는 규칙#

이렇게 써요

  • 토글·세그먼트 같은 조작은 제목 줄 오른쪽(CardHead right · Card bar)에 둬요. 넓으면 제목 아랫줄로 내려가요.
  • 나란한 칸의 윗선을 맞춰야 할 때만 CardBar spacer를 써요.

이렇게 하지 않아요

  • 카드 밖 위에 조작만 띄우지 않아요(CardBar right) - 어느 카드의 것인지 몰라요.
  • 면에 테두리를 두르지 않아요.
  • 세그먼트를 인라인으로 다시 그리지 않아요 - Seg를 써요.

문구#

  • 카드 제목은 내용의 이름으로 짧게 적어요("핵심 정보").
  • 부제에는 기준을 적어요("매매 기준").

플랫폼별 차이#

플랫폼별 차이
플랫폼차이
모바일

767px 이하에서 누르는 칸과 여백이 커져요(손가락 기준).

PC

마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요.

Pleos개발 중

차량 앱의 ReevlCard · CardHead(공개 저장소)로 따로 구현했어요.

카드 안쪽 여백 32dp, 카드 사이 24dp(누르는 대상 사이 최소 간격 이상).

안쪽 여백 32dp · 카드 사이 24dp · 모서리 32dp