제안 시스템

디자인킷 · 띠

띠 · 대조 한 줄(지금 / 제안)

D-띠-대조한줄

띠 · 대조 한 줄(지금 / 제안)

언제 쓰는가

본문 아래에 지금 방식과 제안 방식을 좌우로 맞세울 때. 양쪽 문구 각각 30자 이내. 값 바꾸는 법: .h 첫째=지금, .h.pro=제안. span=꼬리표, p=문구 한 줄.

참고

직접 제작. 비교 장표의 as-is / to-be 좌우 대조 표기를 참고.

조각

<div class="dk dks dks-vs"><div class="h"><span>지금</span><p>월 1회 보고, 매체별 수치 나열 중심</p></div><div class="h pro"><span>제안</span><p>주 1회 보고, 전환 기준 판단과 다음 조치 포함</p></div></div>

스타일

.dks-vs{border-top:1px solid var(--line2);padding-top:14px;display:grid;grid-template-columns:1fr 1fr}
.dks-vs .h{min-width:0;display:flex;flex-direction:column;gap:2px;padding-right:28px}
.dks-vs .h.pro{padding:0 0 0 28px;border-left:1px solid var(--line2)}
.dks-vs .h span{font-size:var(--f-cap);font-weight:600;color:var(--mu);line-height:1.4}
.dks-vs .h p{margin:0;font-size:var(--f-body);color:var(--ink2);line-height:1.45}
.dks-vs .h.pro span{color:var(--ac)}
.dks-vs .h.pro p{color:var(--ink);font-weight:600}