6.Kotak Download (다운로드 상자)

Jika ingin menggunakan gambar, gunakan kode ini.

CARA MENGGUNAKAN:

<div class="downloadbox">
  <div>Nama File</div>
  <div class="inner">
    <div class="icon">
      <img src="URL Gambar"/>
    </div>
    <div class="info">
      <-- Deskripsi File -->
      Size: 1 GB<br/>
      Updated: 1 May 2025<br/>
      File Type: .rar
    </div>
    <div class="go">
      <a class="button download" href="URL File" rel="noopener" target="_blank" title="Judul">Download</a>
    </div>
  </div>
</div>

Atau jika ingin menggunakan ikon SVG, gunakan kode ini. Kamu bebas mengganti ikon SVG sesuai keinginan.

CARA MENGGUNAKAN:

<div class="downloadbox">
  <div>Nama File</div>
  <div class="inner">
    <div class="icon noimg">
      <svg viewBox="0 0 24 24"><path d="M6 20.735a2 2 0 0 1 -1 -1.735v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-1"/><path d="M11 17a2 2 0 0 1 2 2v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-2a2 2 0 0 1 2 -2z"/><path d="M11 5l-1 0"/><path d="M13 7l-1 0"/><path d="M11 9l-1 0"/><path d="M13 11l-1 0"/><path d="M11 13l-1 0"/><path d="M13 15l-1 0"/></svg>
    </div>
    <div class="info">
    <-- Deskripsi File -->
    Size: 1 GB<br/>
      Updated: 1 May 2025<br/>
      File Type: .rar
    </div>
    <div class="go">
      <a class="button download" href="URL File" rel="noopener" target="_blank" title="Judul">Download</a>
    </div>
  </div>
</div>

7. Kotak

CARA MENGGUNAKAN: Pilih salah satu kode berikut sesuai dengan warnanya.

<div class="box">Kotak bawaan</div>

<div class="box outline">Kotak garis</div>

<div class="box green">Kotak hijau</div>

<div class="box blue">Kotak biru</div>

<div class="box red">Kotak merah</div>

<div class="box yellow">Kotak kuning</div>

8. Badge

Indikator sederhana di atas teks untuk menekankan pentingnya. Memiliki bebeapa pilihan warna.

CARA MENGGUNAKAN: Pilih salah satu kode berikut sesuai dengan warnanya. Letakkan kode di samping teks.

<span class="badge">Sesuai warna tema</span>

<span class="badge green">Hijau</span>

<span class="badge blue">Biru</span>

<span class="badge red">Merah</span>

<span class="badge yellow">Kuning</span>