Peringatan W3.CSS


Kelas panel w3 adalah kelas yang sempurna untuk menampilkan semua jenis peringatan:

×

Bahaya!

Merah sering menunjukkan situasi berbahaya atau negatif.

Peringatan sering ditampilkan menggunakan warna yang kuat:

×

Bahaya!

Merah sering menunjukkan situasi berbahaya atau negatif.

Contoh

<div class="w3-panel w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div> 

Tampilkan Peringatan

×

Peringatan!

Kuning sering menunjukkan peringatan yang mungkin perlu diperhatikan.

×

Peringatan!

Kuning sering menunjukkan peringatan yang mungkin perlu diperhatikan.

Contoh

<div class="w3-panel w3-yellow">
  <h3>Warning!</h3>
  <p>Yellow often indicates a warning that might need attention.</p>
</div> 

Tampilkan Keberhasilan

×

Kesuksesan!

Hijau sering menunjukkan sesuatu yang sukses atau positif.

×

Kesuksesan!

Hijau sering menunjukkan sesuatu yang sukses atau positif.

Contoh

<div class="w3-panel w3-green">
  <h3>Success!</h3>
  <p>Green often indicates something successful or positive.</p>
</div> 

Tampilkan Informasi

×

Informasi!

Biru sering menunjukkan perubahan atau tindakan informatif yang netral.

×

Informasi!

Biru sering menunjukkan perubahan atau tindakan informatif yang netral.

Contoh

<div class="w3-panel w3-blue">
  <h3>Information!</h3>
  <p>Blue often indicates a neutral informative change or action.</p>
</div> 

Menggunakan Wadah

Kelas w3-container juga dapat digunakan untuk menampilkan peringatan:

Contoh

<div class="w3-container w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div> 


Peringatan dalam Semua Warna

Peringatan sering ditampilkan dalam warna khusus, tetapi warna apa pun dapat digunakan:

Bahaya!

Merah sering menunjukkan situasi berbahaya atau negatif.

Bahaya!

Merah sering menunjukkan situasi berbahaya atau negatif.

Bahaya!

Merah sering menunjukkan situasi berbahaya atau negatif.

Bahaya!

Merah sering menunjukkan situasi berbahaya atau negatif.

Bahaya!

Merah sering menunjukkan situasi berbahaya atau negatif.

Contoh

<div class="w3-panel w3-blue-grey">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div> 

Peringatan Penutupan

Untuk menutup kotak peringatan, klik X di sudut kanan atas:

×

Bahaya!

Merah sering menunjukkan situasi berbahaya atau negatif.

Untuk membuat X yang menutup peringatan, tambahkan elemen <span> dengan tombol kelas w3 dan acara onclick :

Contoh

<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">&times;</span>

Tip: HTML × entitas adalah ikon pilihan untuk tombol tutup (bukan huruf "X").


Peringatan Bulat

Gunakan kelas w3-round jika Anda ingin sudut membulat:

Kesuksesan!

Di sini w3-round digunakan.

Kesuksesan!

Di sini digunakan w3-round-large.

Kesuksesan!

Di sini w3-round-xxlarge digunakan.

Contoh

<div class="w3-panel w3-green w3-round">

Waspada sebagai Kartu

Gunakan kelas kartu w3 jika Anda ingin peringatan ditampilkan sebagai kartu:

Peringatan!

Kuning sering menunjukkan sesuatu yang perlu diperhatikan.

Contoh

<div class="w3-panel w3-yellow w3-card-4">