디자인킷 · 반폭
반폭 · 핵심 문장 1개와 근거 3개
D-반폭-핵심문장근거3
언제 쓰는가
한 문장 주장과 그 근거를 한 칸에 놓을 때. 핵심 문장 36자 이내(2줄), 근거 2~3개, 근거마다 34자 이내. 값 바꾸는 법: .cl=핵심 문장(강조할 낱말 하나를 em 으로). .r 하나가 근거 한 줄(.k 번호, 다음 span 문구). 근거 2~3개.
참고
직접 제작. 컨설팅 보고서의 주장 먼저, 근거 나중(피라미드 원칙) 구성 참고.
조각
<div class="dk dkh dkh-t-claim"><div class="dk-card"><p class="dk-lb">진단 요약</p><div class="cl">전환의 62%가 <em>검색 광고</em>에서 발생, 예산 비중은 38%</div> <div class="ls"> <div class="r"><span class="k">근거 1</span><span>최근 6개월 매체별 전환 집계 기준, 검색 광고 전환 비중 62%</span></div> <div class="r"><span class="k">근거 2</span><span>같은 기간 검색 광고 예산 비중 38%, 노출 점유율 54%</span></div> <div class="r"><span class="k">근거 3</span><span>상위 검색어 20개 중 9개가 예산 소진으로 오후 노출 중단</span></div> </div></div></div>
스타일
.dkh-t-claim .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-t-claim .dk-lb{margin:0 0 10px}
.dkh-t-claim .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-t-claim .cl{flex:none;margin:2px 0 14px;font-size:var(--f-lg);font-weight:700;line-height:1.4;letter-spacing:-.02em;text-wrap:balance}
.dkh-t-claim .cl em{font-style:normal;color:var(--ac)}
.dkh-t-claim .r{flex:1;display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.5;color:var(--ink2)}
.dkh-t-claim .r:first-child{border-top-color:var(--line2)}
.dkh-t-claim .r .k{font-size:var(--f-cap);color:var(--mu);white-space:nowrap}