データ可視化・ダッシュボード
タイムライン
縦の連結線とノードで出来事を時系列に並べる見本。現在地のノードだけ藍で強調し、各項目に時刻・見出し・説明を添えます。読み込みで各項目がふわっと現れます。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
コード（コピーして使えます）
<div class="tl-wrap">
<ol class="tl-list">
<li class="tl-item is-done">
<span class="tl-node" aria-hidden="true"></span>
<div class="tl-content">
<span class="tl-time">09:12</span>
<p class="tl-title">注文を受け付けました</p>
<p class="tl-desc">ご注文の確認メールを送信しました。</p>
</div>
</li>
<li class="tl-item is-done">
<span class="tl-node" aria-hidden="true"></span>
<div class="tl-content">
<span class="tl-time">11:40</span>
<p class="tl-title">商品を準備中</p>
<p class="tl-desc">倉庫で梱包作業を行っています。</p>
</div>
</li>
<li class="tl-item is-active">
<span class="tl-node" aria-hidden="true"></span>
<div class="tl-content">
<span class="tl-time">14:05</span>
<p class="tl-title">配送センターを出発</p>
<p class="tl-desc">お届け先エリアへ向けて輸送中です。</p>
</div>
</li>
<li class="tl-item">
<span class="tl-node" aria-hidden="true"></span>
<div class="tl-content">
<span class="tl-time">予定</span>
<p class="tl-title">お届け</p>
<p class="tl-desc">本日中のお届けを予定しています。</p>
</div>
</li>
</ol>
</div>