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.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Selection" height=420 width=880 subtitle="고르는 카드(8판 .pre): 아이콘 36, 제목 16, 설명 13, 보라 한 줄, 오른쪽 둥근 표시. 고르면 연보라 + 보라 링 2" -->
<style>body{margin:0;padding:var(--space-6);background:var(--canvas)}.stack{display:flex;flex-direction:column;gap:var(--space-6)}.w880{max-width:814px}</style><div class="sl stack w880"><div class="sl-options sl-options--two" role="radiogroup">
<button class="sl-option" role="radio" aria-checked="true"><span class="sl-tile"><svg class="sl-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg></span><span class="sl-option__text"><span class="sl-option__title">AI 전환</span><span class="sl-option__desc">AI를 실제 업무에 얹어 쓰는 조직으로</span><span class="sl-option__note">AI 활용, 검증, 데이터 스킬 43개를 진단해요</span></span><span class="sl-option__radio" aria-hidden="true"></span></button>
<button class="sl-option" role="radio" aria-checked="false"><span class="sl-tile"><svg class="sl-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span><span class="sl-option__text"><span class="sl-option__title">전직원 스킬 진단</span><span class="sl-option__desc">직무별 전체 스킬을 한 번에 재요</span><span class="sl-option__note">전체 스킬 126개</span></span><span class="sl-option__radio" aria-hidden="true"></span></button>
<button class="sl-option is-focus" role="radio" aria-checked="false"><span class="sl-tile"><svg class="sl-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></span><span class="sl-option__text"><span class="sl-option__title">신사업 준비</span><span class="sl-option__desc">시장을 읽고 사업 기회를 구체화하는 조직으로</span><span class="sl-option__note">기획, 분석, 실험 스킬 31개를 진단해요</span></span><span class="sl-option__radio" aria-hidden="true"></span></button>
<button class="sl-option is-disabled" role="radio" aria-checked="false" disabled><span class="sl-tile"><svg class="sl-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg></span><span class="sl-option__text"><span class="sl-option__title">조직 개편</span><span class="sl-option__desc">직무 자료를 올리면 고를 수 있어요</span></span><span class="sl-option__radio" aria-hidden="true"></span></button>
</div></div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.