Anatomi

Jenis dan variasi

Banner Success

Memuat informasi yang sifatnya positif dan biasanya berupa respon lanjutan dari sebuah aksi yang telah dilakukan sebelumnya.

Banner Informational

Memuat informasi yang sifatnya netral, umum, dan berdiri sendiri (bukan berupa respon lanjutan).

Banner Warning

Memuat informasi yang sifatnya berupa sebuah peringatan yang harus dibaca dan membutuhkan aksi tindak lanjut yang perlu dilakukan.

Banner Critical

Memuat informasi yang sifatnya error/blocking dan mewajibkan kita untuk melakukan sebuah aksi terlebih dahulu agar dapat melanjutkan.

Behaviors

Tidak ada interaksi spesifik terhadap komponen Banner, Banner merupakan komponen statis.

Panduan penggunaan

Gunakan Banner ketika ada informasi penting yang perlu dibaca

Banner dapat digunakan untuk menarik perhatian kita agar membaca informasi yang ada di dalamnya, sehingga sangat cocok digunakan untuk informasi yang penting, namun tidak terlalu panjang.

Jangan pakai 2 tipe Banner yang berbeda dalam satu halaman.

Hanya gunakan Banner jika memang ada informasi yang penting saja, hindari penggunaan Banner yang terlalu banyak dalam 1 halaman agar tidak mereduksi tingkat urgensinya.

Pastikan penggunaannya sesuai dengan tipe informasi

Gunakan jenis Banner yang sesuai dengan tipe informasinya untuk memastikan penerimaan informasinya tepat sasaran.

Responsif

Mobile 768 px

• Banner lebarnya 90 - 100% dari viewport
• Layout:
  • Ikon, judul, dan tombol tutup tetap sejajar dalam satu baris (judul bisa terpotong dengan ellipsis).
  • Deskripsi turun ke baris berikutnya.
• Aksi (tombol + tautan) ditumpuk secara vertikal di bawah deskripsi

Tablet 769 - 1024px

• Lebar: 80–90% dari viewport
• Layout:
  • Ikon, judul, dan tombol tutup tetap sejajar dalam satu baris.
  • Deskripsi bisa turun, tetapi dibatasi sekitar 70–80% lebar.
• Aksi ditampilkan inline (tombol + tautan berdampingan).

Desktop 1025 - 1440px

• Lebar: 60–70% dari lebar layar, dengan batas maksimum (misalnya 960px).
• Layout:
  • Semua konten muat dalam satu blok horizontal.
  • Deskripsi dan aksi tetap inline (tidak ditumpuk).
  • Tombol tutup sejajar di sisi kanan.

Large Desktop 1440+

• Lebar: 40–50% dari lebar layar, dengan batas maksimum (misalnya 1280px).
• Layout:
  • Sama dengan desktop, tetapi banner terasa lebih terpusat dan seimbang.
  • Ada ruang kosong (whitespace) yang cukup di kiri dan kanan.

Panduan penulisan

Sampaikan informasi dalam satu kalimat

Maksimal 2 baris.

Gunakan tombol call-to-action (CTA) yang jelas

Pastikan ada tindakan yang perlu diambil.

Fokus pada pesan penting

Hindari informasi berlebihan, hanya berikan pesan yang relevan.