DEMO EDITOR: Halaman ini adalah laboratorium blok Gutenberg. Periksa tampilannya di mode terang/gelap serta berbagai ukuran layar. Media yang dipakai hanya ilustrasi demonstrasi.
1. Tipografi dan paragraf
Teks pembuka memperlihatkan keterbacaan pada kolom artikel, jarak antarbaris, serta kontras warna. Coba geser layar untuk melihat responsivitas bagian ini.
Contoh teks tebal, teks miring, dan tautan internal beranda yang dapat diklik.
Subjudul tingkat tiga
Subjudul H3 menunjukkan tingkatan informasi yang lebih kecil dibanding H2.
Subjudul tingkat empat
Subjudul H4 menjadi tempat menguji jarak dan ukuran font pada hierarki konten yang lebih dalam.
2. Gambar standar dengan caption
3. Galeri 3 kolom
4. Cover dengan teks overlay
Judul di atas cover
Contoh tulisan di atas gambar dengan overlay.
5. Kolom dan grup
Kolom satu
Menampilkan isi singkat dalam kolom pertama.
Kolom dua
Isi kedua dapat diatur sejajar pada desktop.
Kolom tiga
Pada mobile kolom sebaiknya turun ke bawah.
Blok Group
Wadah konten berwarna terang untuk menguji latar, padding, dan tipografi.
6. Media & teks
Gambar di kiri, teks di kanan
Pada ponsel, komponen ini perlu berubah menjadi satu kolom agar mudah dibaca.
7. Kutipan dan pullquote
Konsistensi tipografi menjadi salah satu kunci pengalaman membaca yang nyaman.
Kutipan contoh, bukan narasumber sungguhan
Ruang putih dan ritme visual membantu pembaca memahami isi artikel.
Catatan desain demonstrasi
8. Daftar dan tabel
- Periksa ukuran layar desktop
- Periksa ukuran layar tablet
- Periksa ukuran layar smartphone
- Buka mode terang
- Ganti ke mode gelap
- Uji ulang gambar dan teks
| Elemen | Desktop | Mobile |
|---|---|---|
| Judul | Besar dan kuat | Proporsional |
| Gambar | Lebar kolom | Tidak meluber |
| Sidebar | Terlihat | Turun/hide sesuai theme |
9. Tombol dan tautan
10. Blok details/FAQ
Apakah halaman ini mengandung berita nyata?
Tidak. Semua judul, isi, dan media dibuat sebagai simulasi pengujian theme.
Apa yang perlu diperiksa setelah impor?
Buka halaman di ponsel, uji mode gelap, periksa media dan tabel, lalu lihat tampilan single post.
11. Separator, spacer, kode, dan teks berformat
<article class="kabarflow">Contoh markup</article>Baris pertama contoh
Baris menjorok
Baris terakhir
Membaca kabar dengan jernih, Menyusun informasi dengan rapi.
12. Video dan audio lokal
13. Berkas unduhan dan shortcode iklan
14. Dynamic block: berita terbaru
- Hello world!
- Ruang publik modern menjadi tempat bertemu ide baru
- Menata kawasan perkotaan dengan pendekatan yang lebih manusiawi
- Layanan publik digital dan pengalaman pengguna yang semakin praktis
- Gerakan warga menghidupkan taman dan jalur pedestrian
Akhir halaman demonstrasi. Hapus seluruh konten uji melalui menu Perkakas → Demo KabarFlow sebelum situs resmi diluncurkan.
