카드 · 카드 목록형

관련된 정보를 한 덩어리로 묶을 때. 모바일에서 표 대신 쓰는 목록형도 여기 있습니다.

코드

<div class="jt-card">일반 카드</div>
 
<div class="jt-card-row" aria-selected="true">
  <div class="jt-card-row-main">
    <div class="jt-card-row-title">인투메디 클리닉스 리쥬</div>
    <div class="jt-card-row-meta">LOT 26H21-03 · 2026-08-21</div>
  </div>
  <span class="jt-badge jt-badge-pass">적합</span>
  <button class="jt-btn-ghost jt-btn-sm">상세</button>
</div>

하지 말 것

카드를 3중으로 겹치지 마세요. 테두리가 겹쳐 지저분해집니다.
카드 전체를 클릭 영역으로 만들 거면 <a>나 <button>으로 감싸세요. div + onclick은 키보드로 못 누릅니다.

접근성

.jt-card-row-meta(LOT·일자 등)는 정보이므로 --color-text-secondary를 씁니다. 흐리게 보이려고 tertiary를 쓰면 대비 기준에 미달합니다.

앱에서 모양 바꾸기

jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).

노브: --jt-grid-min (카드 그리드 최소폭)

.my-page .jt-card { --jt-grid-min: …; }