Top
원본: projects/skill-lens/design/components/Top/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
화면 머리: 800 제목, 핵심 구절 하나만 파랑
화면 머리입니다. 원본은 8판 .kick, .h1, .tx.s.
쓰는 곳
모든 화면의 맨 위.
구성(화면이 넘겨줄 것)
단계 라벨(선택, "04 직무"), 제목, 설명.
규칙
- 단계 라벨 13 회색 600, 아래 8. 제목과 설명 사이 6.
- 제목: 온보딩 PC 40/48(
sl-top--lg), 작업 화면과 폰 28/34. 핵심 구절 하나만sl-accent. - 설명 16 회색(폰 14).
- Shell 카드 안에서는
sl-top--flush(위아래 여백 없음).
접근성
- 제목은 화면의
h1하나.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Layout" height=300 subtitle="화면 머리: 800 제목, 핵심 구절 하나만 파랑" -->
<style>body{margin:0;padding:0 var(--space-4);background:var(--surface)}.w{max-width:360px}.w2{max-width:560px}</style>
<div class="sl w"><div class="sl-top"><div class="sl-top__eyebrow">2/5 직무</div><h1 class="sl-top__title">업종에 맞는 <span class="sl-accent">직무 46개</span>를 추천했어요</h1><p class="sl-top__desc">41개는 바로 쓸 수 있고, 5개만 확인하면 돼요.</p></div></div>
<div class="sl w2"><div class="sl-top sl-top--lg"><h1 class="sl-top__title"><span class="sl-accent">가온에듀</span>가 맞나요?</h1><p class="sl-top__desc">공개 자료(DART, 국민연금)에서 찾았어요. 다르면 아래에서 고칠 수 있어요.</p></div></div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.