Dasar

Membuat alert kamu membutuhkan tag <div> dengan class .alert diikuti class untuk style alert-nya, ada .alert--warning, .alert--danger, .alert--info, dan .alert--success. Didalamnya ada beberapa bagian yaitu Icon, Deskripsi, dan Aksi.

Pertama, Icon. Membuat Icon kamu membutuhkan tag <div> dengan class .alert__icon, lalu didalamya kamu bisa meletakkan icon dari Font Awesome menggunakan tag <span>. Jika kamu belum pernah memakai Font Awesome sebelumnya, saya sangat menyarankan membaca dokumentasi Font Awesome .

Kedua, Deskripsi. Deskripsi adalah tempat kamu meletakkan pesan yang ingin kamu sampaikan. Membuat Deskripsi kamu membutuhkan tag <div> dengan class .alert__description, lalu didalamnya kamu bisa menggunakan tag <p> dan meletakkan pesan-mu didalam tag <p> itu. Letakkan Deskripsi setelah Icon.

Ketiga, Aksi. Aksi adalah tempat dimana kamu meletakkan tombol untuk menutup alert. Membuat Aksi kamu membutuhkan tag <div> dengan class .alert__action, lalu didalamnya buat element menggunakan tag <a> dengan class .alert__close-btn dan tambahkan code entity HTML Unicode UTF-8 &times; untuk membuat tanda (×). Letakkan Aksi setelah Deskripsi.

Kamu harus meletakkan Alert didalam tag <main> dengan class .main supaya fitur untuk menutup alert bisa bekerja.

CopyHTML
<div class="alert alert--danger">
    <div class="alert__icon">
        <span class="fa fa-ban"></span>
    </div>
    <div class="alert__description">
        <p>Pratinjau alert danger. Alert ini dapat diabaikan.</p>
    </div>
    <div class="alert__action">
        <a class="alert__close-btn">&times;</a>
    </div>
</div><!-- alert -->

<div class="alert alert--info">
    <div class="alert__icon">
        <span class="fa fa-info-circle"></span>
    </div>
    <div class="alert__description">
        <p>Pratinjau alert info. Alert ini dapat diabaikan.</p>
    </div>
    <div class="alert__action">
        <a class="alert__close-btn">&times;</a>
    </div>
</div><!-- alert -->

<div class="alert alert--warning">
    <div class="alert__icon">
        <span class="fa fa-warning"></span>
    </div>
    <div class="alert__description">
        <p>Pratinjau alert warning. Alert ini dapat diabaikan.</p>
    </div>
    <div class="alert__action">
        <a class="alert__close-btn">&times;</a>
    </div>
</div><!-- alert -->

<div class="alert alert--success">
    <div class="alert__icon">
        <span class="fa fa-check-circle"></span>
    </div>
    <div class="alert__description">
        <p>Pratinjau alert success. Alert ini dapat diabaikan.</p>
    </div>
    <div class="alert__action">
        <a class="alert__close-btn">&times;</a>
    </div>
</div><!-- alert -->

Fixed

Kamu juga bisa membuat alert fixed dengan menambahkan class .alert--fixed-rb setelah class untuk style alert atau bisa juga setelah class .alert.

CopyHTML
<div class="alert alert--danger alert--fixed-rb">
    <div class="alert__icon">
        <span class="fa fa-ban"></span>
    </div>
    <div class="alert__description">
        <p>Pratinjau alert danger. Alert ini dapat diabaikan.</p>
    </div>
    <div class="alert__action">
        <a class="alert__close-btn">&times;</a>
    </div>
</div><!-- alert -->