커머스·전환

색상, 소재, 크기, 수량을 선택하면 상품 미리보기와 가격이 갱신된다. 품절 옵션과 재고 한도도 표시한다.

담긴 상품의 수량·삭제·소계를 빠르게 조정하는 컴팩트 장바구니. 무료 배송까지 남은 금액과 진행률, 전체 삭제 후 빈 상태까지 포함한다.

상품 내역·쿠폰·배송 방법·최종 금액을 결제 직전에 검토하는 주문 패널. 할인 코드의 성공·실패와 배송비 변경을 실시간 합계에 반영한다.

연락처, 배송, 결제 정보를 순서대로 입력하고 완료 화면으로 이어지는 결제 흐름. 데모에서는 카드 번호를 받지 않는다.

월/연 결제 토글 + 추천 플랜 강조 3단 카드. 연 결제는 할인율만큼 자동 계산해 플랜마다 가격을 두 번 쓸 필요가 없다. 문의형(가격 null) 플랜도 지원.

플랜·경쟁사를 항목별로 맞대는 매트릭스. 진짜 <table>이라 스크린리더가 행·열 맥락을 읽고, 아이콘 값엔 sr-only 텍스트를 함께 넣는다. 좁은 화면에선 항목마다 카드로 재배치.