제안 시스템

디자인킷 · 띠

띠 · 예시 값 안내 줄

D-띠-예시값안내

띠 · 예시 값 안내 줄

언제 쓰는가

장에 넣은 수치가 구성 이해를 위한 예시일 때 그 사실과 실제 값이 들어갈 시점을 본문 아래에 밝힐 때. 문구 50자 이내, 오른쪽 20자 이내. 값 바꾸는 법: i=꼬리표, p=예시라는 사실과 범위, span=실제 값이 들어가는 시점이나 문서. 강조색을 쓰지 않는 조용한 줄.

참고

직접 제작. 보고서 초안의 예시 수치 표기(illustrative) 줄을 참고. 예시임을 드러내려고 위쪽 선을 점선으로 둠.

조각

<div class="dk dks dks-sample"><i>예시 값</i><p>이 장의 수치는 구성 이해를 위한 예시, 실제 값은 계정 진단 이후 확정</p><span>확정 값 기재: 2주차 진단 보고서</span></div>

스타일

.dks-sample{border-top:1px dashed var(--line2);padding-top:7px;min-height:44px;display:flex;align-items:center;gap:14px}
.dks-sample i{flex:none;font-style:normal;font-size:var(--f-cap);font-weight:600;color:var(--mu);border:1px solid var(--line2);border-radius:4px;padding:1px 8px;line-height:1.5}
.dks-sample p{flex:1;min-width:0;margin:0;font-size:var(--f-cap);color:var(--mu)}
.dks-sample span{flex:none;font-size:var(--f-cap);color:var(--ink2)}