Components

Adaptive Card

대화 흐름 안에 뜨는 인라인 리치 카드입니다 (MS Adaptive Cards 표준). 요약·확인·선택을 가볍게 처리합니다.

예약 확인

병원온누리병원 내과

일시7월 31일 (금) 14:00

담당김선우 선생님

코드 보기

<div class="ac-card">
  <div class="ac-strip"></div>  <!-- 위젯 포인트색 상속 -->
  <div class="ac-body">
    <div class="ac-title">예약 확인</div>
    <div class="ac-row"><span>일시</span><b>7/31 14:00</b></div>
  </div>
  <div class="ac-actions">변경(Ghost) · 확인(Primary)</div>
</div>

Variants

이름	설명	미리보기
확인형	항목 rows + 버튼 2 (예약·주문·접수 확인)	예약 확인
상태형	진행 단계·배송 상태 표시 (버튼 없음)	배송 중 · 2/4
선택형	시간대·상품 등 선택지를 카드 안에서	14:0015:00

Guidelines

✓ Do

폭은 챗 말풍선 폭(~340px) 이내
상단 3px 스트립이 위젯 포인트색(--ac-accent)을 상속
완결 작업(결제·서명)은 카드가 아니라 xApp으로

✕ Don't

카드 안에 스크롤 만들지 않는다 (넘치면 xApp)
버튼 3개 이상 금지

Specification

속성	토큰/값	비고
`폭`	`≤340px / radius 12px`
`포인트`	`--ac-accent 3px 스트립`
`rows`	`0.76rem / 라벨 muted·값 550`

비교

카탈로그 25종의 SoT = 화면하네스 component_library_v1.html (상품 비교·예약 확인·배송 상태·본인인증 등). 이 페이지는 컨테이너 규격만 정의한다. Card vs xApp — 가벼운 확인·선택은 Card, 완결 작업은 xApp.