Menu Reveal List

01_PRODUCTION

// ACTIVE

02_ARCHIVE

// LOCKED

HTML_STRUCTURE

<div class='bh-list-v1-reveal'><div class='bh-rev-item'><h4>01_PRODUCTION</h4><span>// ACTIVE</span></div><div class='bh-rev-item'><h4>02_ARCHIVE</h4><span>// LOCKED</span></div></div>

CSS_STYLING

.bh-list-v1-reveal { width: 100%; max-width: 400px; } .bh-rev-item { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 2px solid #111; cursor: pointer; transition: 0.3s; } .bh-rev-item h4 { font-weight: 900; color: #444; transition: 0.3s; } .bh-rev-item span { font-size: 10px; color: transparent; font-weight: 900; } .bh-rev-item:hover { background: #050505; border-bottom-color: #fff; } .bh-rev-item:hover h4 { color: #fff; padding-left: 10px; } .bh-rev-item:hover span { color: #00ff88; }

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