データ可視化・ダッシュボード
リストビュー
アバター＋主・副テキスト＋右端メタ／シェブロンで構成する定番のデータ一覧。行をタップすると選択状態になり、区切り線とホバーで視認性を保ちます。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="lv-wrap">
<ul class="lv-list" role="listbox" aria-label="メンバー一覧">
<li role="option" aria-selected="false">
<button class="lv-row" type="button">
<span class="lv-avatar" style="--g:linear-gradient(135deg,#2b50c7,#7fa4ff)" aria-hidden="true">佐</span>
<span class="lv-body">
<span class="lv-primary">佐藤 花子</span>
<span class="lv-secondary">プロダクトデザイナー</span>
</span>
<span class="lv-meta">3分前</span>
<svg class="lv-chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<polyline points="5,3 9,7 5,11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</li>
<li role="option" aria-selected="false">
<button class="lv-row" type="button">
<span class="lv-avatar" style="--g:linear-gradient(135deg,#2a7a45,#7fc79a)" aria-hidden="true">鈴</span>
<span class="lv-body">
<span class="lv-primary">鈴木 一郎</span>
<span class="lv-secondary">フロントエンド開発</span>
</span>
<span class="lv-meta">1時間前</span>
<svg class="lv-chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<polyline points="5,3 9,7 5,11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</li>
<li role="option" aria-selected="false">
<button class="lv-row" type="button">
<span class="lv-avatar" style="--g:linear-gradient(135deg,#b8860b,#e0b64a)" aria-hidden="true">田</span>
<span class="lv-body">
<span class="lv-primary">田中 美咲</span>
<span class="lv-secondary">カスタマーサクセス</span>
</span>
<span class="lv-meta">昨日</span>
<svg class="lv-chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<polyline points="5,3 9,7 5,11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</li>
<li role="option" aria-selected="false">
<button class="lv-row" type="button">
<span class="lv-avatar" style="--g:linear-gradient(135deg,#6b5bd0,#b3a3f0)" aria-hidden="true">高</span>
<span class="lv-body">
<span class="lv-primary">高橋 健</span>
<span class="lv-secondary">マーケティング</span>
</span>
<span class="lv-meta">3日前</span>
<svg class="lv-chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<polyline points="5,3 9,7 5,11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</li>
</ul>
</div>