디자인킷 · 띠
띠 · 체크 3개 가로
D-띠-체크3개
언제 쓰는가
본문 아래에 이미 끝냈거나 갖춘 항목 3개를 확인 표시와 함께 둘 때. 앞머리 8자 이내, 항목 16자 이내. 값 바꾸는 법: .lb=앞머리, li 하나가 항목 1개(svg 는 그대로 두고 뒤 문구만 교체). 3개 고정.
참고
직접 제작. 점검표 장표의 완료 표시 줄을 참고. 확인 표시는 장식이 아니라 상태 표기.
조각
<div class="dk dks dks-check3"><b class="lb">착수 전 완료 항목</b><ul><li><svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true"><circle cx="8" cy="8" r="8" style="fill:var(--g4)"/><path d="M4.4 8.3l2.4 2.4 4.8-5" style="fill:none;stroke:var(--card);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round"/></svg>전환 추적 태그 설치</li><li><svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true"><circle cx="8" cy="8" r="8" style="fill:var(--g4)"/><path d="M4.4 8.3l2.4 2.4 4.8-5" style="fill:none;stroke:var(--card);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round"/></svg>소재 3종 사전 승인</li><li><svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true"><circle cx="8" cy="8" r="8" style="fill:var(--g4)"/><path d="M4.4 8.3l2.4 2.4 4.8-5" style="fill:none;stroke:var(--card);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round"/></svg>일 예산 상한 설정</li></ul></div>
스타일
.dks-check3{border-top:1px solid var(--line2);padding-top:7px;min-height:44px;display:flex;align-items:center;gap:32px}
.dks-check3 .lb{flex:none;font-size:var(--f-cap);font-weight:600;color:var(--ac)}
.dks-check3 ul{flex:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.dks-check3 li{display:flex;align-items:center;gap:10px;font-size:var(--f-sm);color:var(--ink);white-space:nowrap}
.dks-check3 li svg{flex:none}