Components

List

탐색·설정용 행 목록입니다. 행 전체가 클릭 영역입니다.

일반 설정

언어·표시 형식

›

보안

접속 기록·권한

›

멤버

3명

›

코드 보기

<div class="tn-list">
  <div class="li">
    <div><div class="tt">제목</div><div class="dd2">보조</div></div>
    <span class="ar">›</span>
  </div>
</div>

Variants

이름	설명	미리보기
이동형	우측 › 화살표	보안›
값 표시형	우측에 현재 값/Switch	알림

Guidelines

✓ Do

행 전체를 클릭 영역으로
보조 설명은 한 줄 이내

✕ Don't

행 안에 버튼 2개 이상 금지
아이콘 없이 성립하게 만든다

Specification

속성	토큰/값	비고
`행 패딩`	`0.75rem 1rem`
`hover`	`var(--muted)`

비교

List vs Table — List는 탐색·설정, Table은 데이터 비교.