Selamat datang di dokumentasi resmi Komponen UI & Typography Template. Halaman ini memuat seluruh panduan elemen markup, kotak alert/callout, tabel responsif, timeline, grid spesifikasi, hingga format tombol aksi siap pakai untuk kebutuhan artikel blog Anda.
1. Callout & Alert Boxes
Digunakan untuk menampilkan catatan penting, peringatan checkout, diskon flash sale, atau tips tambahan di dalam artikel.
Preview Hasil:
Kode HTML:
<!-- Box Promo Cyan -->
<div class="callout callout-promo">
<div class="callout-icon">🔥</div>
<div><strong>Promo Spesial:</strong> Cashback 50% berlaku untuk pembayaran QRIS!</div>
</div>
<!-- Box Info -->
<div class="callout callout-info">
<div class="callout-icon">ℹ️</div>
<div><strong>Informasi:</strong> Server melakukan maintenance harian pukul 03:00 WIB.</div>
</div>
<!-- Box Peringatan -->
<div class="callout callout-warning">
<div class="callout-icon">⚠️</div>
<div><strong>Perhatian:</strong> Pastikan User ID dan Server ID sudah benar.</div>
</div>2. Tabel Data Responsif
Tabel dengan pembungkus anti-rusak (*auto horizontal scroll*) dan sorotan baris hover.
Preview Hasil:
| Kategori Game | Metode Pembayaran | Estimasi Pengiriman | Status Layanan |
|---|---|---|---|
| Mobile Legends (MLBB) | QRIS, GoPay, DANA | 1 - 3 Detik | ⚡ Normal |
| Free Fire (FF) | BCA / Mandiri VA | 1 - 5 Detik | ⚡ Normal |
| Genshin Impact | ShopeePay, OVO | 1 - 10 Detik | ⚡ Normal |
Kode HTML:
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Kategori Game</th>
<th>Metode Pembayaran</th>
<th>Estimasi Pengiriman</th>
<th>Status Layanan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mobile Legends (MLBB)</td>
<td>QRIS, GoPay, DANA</td>
<td>1 - 3 Detik</td>
<td><strong style="color: #00ced1;">⚡ Normal</strong></td>
</tr>
</tbody>
</table>
</div>3. Box Kode Voucher / Diskon
Kotak khusus untuk memudahkan pembaca melihat dan menyalin kode promo belanja.
Preview Hasil:
Kode HTML:
<div class="box-code-promo">
<span style="font-size: 11px; color: #94a3b8; text-transform: uppercase; font-weight: 700;">Kode Voucher Diskon:</span>
<span class="code-promo-highlight">NEXUSQRIS50</span>
</div>4. Grid Spesifikasi / Parameter
Menampilkan poin ringkas (misal: syarat event, turnamen, atau spesifikasi turnamen) dalam layout kartu responsif.
Preview Hasil:
Kode HTML:
<div class="specs-card">
<div class="spec-item">
<div class="spec-label">Mode Turnamen</div>
<div class="spec-value">Draft Pick 5v5</div>
</div>
<div class="spec-item">
<div class="spec-label">Total Hadiah</div>
<div class="spec-value">Rp 15.000.000</div>
</div>
<div class="spec-item">
<div class="spec-label">Slot Tersedia</div>
<div class="spec-value">64 Squad</div>
</div>
<div class="spec-item">
<div class="spec-label">Biaya Masuk</div>
<div class="spec-value">Gratis (Free)</div>
</div>
</div>5. Timeline / Step Roadmap
Format alur nomor bersambung vertikal dengan aksen garis cyan.
Preview Hasil:
Masukkan User ID dan Zone ID akun game kamu secara teliti.
Pilih denom paket top-up dan tempel kode voucher diskon.
Scan QRIS melalui aplikasi dompet digital. Diamond masuk dalam hitungan detik.
Kode HTML:
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-title">Langkah 1: Input Data Akun</div>
<p class="timeline-desc">Masukkan User ID dan Zone ID game kamu.</p>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-title">Langkah 2: Pembayaran Instan</div>
<p class="timeline-desc">Scan QRIS dan pesanan diproses otomatis.</p>
</div>
</div>6. Tombol Aksi (CTA Buttons)
Koleksi tombol navigasi order, download file, dan kontak WhatsApp.
Preview Hasil:
Kode HTML:
<!-- Tombol Utama (Cyan Glow) -->
<a href="#order" class="btn-cta">
<i class="fa-solid fa-cart-shopping"></i> Top Up Sekarang
</a>
<!-- Tombol WhatsApp (Emerald Green) -->
<a href="https://wa.me/6281234567890" target="_blank" class="btn-cta btn-cta-wa">
<i class="fa-brands fa-whatsapp"></i> Hubungi WhatsApp
</a>
<!-- Tombol Outline Secondary -->
<a href="#download" class="btn-cta btn-cta-outline">
<i class="fa-solid fa-download"></i> Unduh File
</a>7. Accordion / FAQ Dropdown
Elemen lipatan tanya-jawab berbasis native HTML5 <details> & <summary> (tanpa library berat).
Preview Hasil:
Berapa lama transaksi diamond diproses?
Semua pesanan diproses otomatis secara instan dalam 1 hingga 5 detik setelah pembayaran diverifikasi oleh sistem gateway kami.
Apakah layanan top-up ini legal dan aman?
100% legal dan aman karena menggunakan jalur distribusi resmi via UID Game masing-masing publisher.
Kode HTML:
<details>
<summary>Berapa lama transaksi diamond diproses?</summary>
<p>Semua pesanan diproses otomatis dalam 1 - 5 detik setelah pembayaran diverifikasi.</p>
</details>
<details>
<summary>Apakah layanan top-up ini legal dan aman?</summary>
<p>100% legal dan aman via jalur UID resmi publisher.</p>
</details>