Minimal Timeline

12:00

SYS_START

14:30

DATA_FETCH

HTML_STRUCTURE

<div class='bh-list-v1-time'><div class='bh-time-node'><span>12:00</span><h4>SYS_START</h4></div><div class='bh-time-node'><span>14:30</span><h4>DATA_FETCH</h4></div></div>

CSS_STYLING

.bh-list-v1-time { border-left: 2px solid #111; margin-left: 10px; padding-left: 20px; } .bh-time-node { position: relative; margin-bottom: 25px; } .bh-time-node::before { content: ''; position: absolute; left: -27px; top: 5px; width: 10px; height: 10px; background: #000; border: 2px solid #333; } .bh-time-node span { font-size: 9px; color: #444; font-weight: 900; } .bh-time-node h4 { font-size: 12px; color: #fff; font-weight: 900; }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.