OptionCard
원본: projects/skill-lens/design/components/OptionCard/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
고르는 카드(8판 .pre): 아이콘 36, 제목 16, 설명 13, 보라 한 줄, 오른쪽 둥근 표시. 고르면 연보라 + 보라 링 2
여러 선택지 중 하나를 고르는 카드입니다. 원본은 8판 .opt와 .pre.
쓰는 곳
조직 목적 고르기, 실무자 스킬 수정 방식, 방식 고르기.
구성(화면이 넘겨줄 것)
(선택) 아이콘, 제목, 한 줄 설명, (선택) 보라 한 줄, 선택 상태.
규칙
- 흰 면 + 1px 테 + 옅은 그림자, 둥글기 14, 안쪽 16. 제목 16 700, 설명 13 회색, 보라 한 줄(
sl-option__note) 13. - 오른쪽 둥근 표시(
sl-option__radio, 22). 고르면 연보라 바탕 + 보라 링 2 + 보라 원 안 흰 체크, 아이콘 타일은 흰 면. - 호버는 1px 떠오름 + 보라 링. 둘씩 놓으려면
sl-options sl-options--two(폰은 한 열). - 한 화면의 선택지는 넷까지. 여러 개 고르기는 ListRow 체크 행.
접근성
radiogroup, 카드radio+aria-checked.
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.