Process Step Card

COLLECT_INTEL

Gathering data from the edge.

HTML_STRUCTURE

<div class='bh-card-v2-step'><div class='bh-step-v2-no'>01</div><div class='bh-step-v2-info'><h4>COLLECT_INTEL</h4><p>Gathering data from the edge.</p></div></div>

CSS_STYLING

.bh-card-v2-step { display: flex; width: 100%; max-width: 350px; background: #050505; border: 1px solid #1a1a1a; } .bh-step-v2-no { background: #fff; color: #000; padding: 20px; font-size: 1.5rem; font-weight: 900; display: flex; align-items: center; } .bh-step-v2-info { padding: 15px 20px; } .bh-step-v2-info h4 { font-size: 13px; font-weight: 900; color: #fff; margin-bottom: 5px; } .bh-step-v2-info p { font-size: 11px; color: #444; }

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