Lampiran & unggah

Lampiran materi, lembar kerja, dan rekaman penjelasan. Area unggah memakai garis putus-putus dan menerima berkas yang diseret ke atasnya.

Daftar lampiran

Satu baris per berkas: ikon jenis, nama, keterangan ukuran dan tanggal, lalu aksi. Nama panjang dipotong dengan elipsis, bukan dibungkus.

Modul Turunan — Bab 4.pdfPDF · 2,4 MB · diunggah 12 Sep 2026

Lembar kerja optimasi.docxDOCX · 380 KB · diunggah 14 Sep 2026

Rekaman penjelasan aturan rantai.mp4MP4 · 84 MB · 18 menit

Lihat kode

<div class="ck-files">
<div class="ck-file">
  <span class="ck-file__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/></svg></span>
  <span class="ck-file__meta"><b>Modul Turunan — Bab 4.pdf</b><span>PDF · 2,4 MB · diunggah 12 Sep 2026</span></span>
  <button class="ck-btn ck-btn--ghost ck-btn--sm" type="button">Unduh</button>
</div><div class="ck-file">
  <span class="ck-file__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/></svg></span>
  <span class="ck-file__meta"><b>Lembar kerja optimasi.docx</b><span>DOCX · 380 KB · diunggah 14 Sep 2026</span></span>
  <button class="ck-btn ck-btn--ghost ck-btn--sm" type="button">Unduh</button>
</div><div class="ck-file">
  <span class="ck-file__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/></svg></span>
  <span class="ck-file__meta"><b>Rekaman penjelasan aturan rantai.mp4</b><span>MP4 · 84 MB · 18 menit</span></span>
  <button class="ck-btn ck-btn--ghost ck-btn--sm" type="button">Unduh</button>
</div></div>

Area unggah

Garis putus-putus menandakan area sasaran. Saat berkas diseret di atasnya, tambahkan kelas ck-drop--on dari JavaScript.

Seret berkas ke sini PDF, DOCX, atau gambar · maksimal 25 MB per berkas

Lihat kode

<div class="ck-drop">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/></svg>
  <b>Seret berkas ke sini</b>
  <span>PDF, DOCX, atau gambar · maksimal 25 MB per berkas</span>
  <button class="ck-btn ck-btn--outline ck-btn--sm ck-mt-2" type="button">Pilih berkas</button>
</div>