제안 시스템

디자인킷 · 띠

띠 · 조건·키워드 칩 나열

D-띠-칩나열

띠 · 조건·키워드 칩 나열

언제 쓰는가

본문 조각 아래에 타깃 조건이나 핵심 키워드를 5~7개 칩으로 나열할 때. 앞머리 6자 이내, 칩 하나 12자 이내, 전체 한 줄. 강조 칩 1개. 값 바꾸는 법: b=앞머리(무엇의 목록인지), li 하나가 칩 1개. 5~7개. 강조할 칩 하나에 class="hot". 줄바꿈 없이 한 줄에 들어가는 길이로.

참고

직접 제작. 광고 관리자 화면의 타기팅 조건 칩 표기를 참고.

조각

<div class="dk dks dks-chips"><b>타깃 조건</b><ul><li>수도권 거주</li><li>30~44세</li><li class="hot">최근 30일 장바구니 이용</li><li>모바일 접속</li><li>평일 저녁 시간대</li><li>기존 구매자 제외</li></ul></div>

스타일

.dks-chips{border-top:1px solid var(--line2);padding-top:14px;display:flex;align-items:center;gap:20px}
.dks-chips > b{flex:none;font-size:var(--f-sm)}
.dks-chips ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;min-width:0}
.dks-chips li{font-size:var(--f-cap);line-height:1.4;color:var(--ink2);background:var(--card);border:1px solid var(--line2);border-radius:15px;padding:5px 13px;white-space:nowrap}
.dks-chips li.hot{background:var(--acw);border-color:var(--acm);color:var(--ac2);font-weight:600}