SummaryCard
원본: projects/skill-lens/design/components/SummaryCard/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
선택 결과 요약: 연보라 카드 + ◆ 목록
선택의 결과나 끝난 일을 요약합니다. 원본은 8판 .sum(줄 요약)과 .ai(연보라 상자).
쓰는 곳
목적 고르기 아래 미리 보기, 마침 화면 요약.
구성(화면이 넘겨줄 것)
제목과 항목 2~4개, 또는 이름과 값 줄.
규칙
- 기본: 연보라 바탕, 둥글기 14, 제목 13 보라 600, 항목 14.
- 줄 요약(
sl-summary--rows>sl-summary__row): canvas 바탕, 둥글기 16, 줄마다 12 16 + 흰 선, 이름 회색 왼쪽, 값 오른쪽 700. - 아무것도 고르지 않았으면 숨깁니다.
접근성
- 내용이 바뀌면
aria-live="polite".
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Display" height=200 subtitle="선택 결과 요약: 연보라 카드 + ◆ 목록" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}</style>
<div class="sl sl-summary" style="max-width:360px"><p class="sl-summary__title">AI 업무 전환을 준비하면</p><ul class="sl-summary__list"><li>전체 스킬 166개 중 약 43개를 우선 선택</li><li>직무 역량 37개</li><li>1인당 진단 스킬 12~24개</li></ul></div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.