Info Box

Membuat Info Box kamu membutuhkan tag <section> atau <div> dengan class .info-box dan class untuk style Info Box-nya, ada class .info-box--blue, .info-box--green, .info-box--orange dan .info-box--red. Didalamnya ada beberapa bagian, yaitu Icon, Deskripsi, dan Button.

Pertama, Icon. Membuat Icon kamu membutuhkan tag <div> dengan class .info-box__icon, didalamnya kamu bisa meletakkan icon dari Font Awesome menggunakan tag <span>.

Kedua, Deskripsi. Membuat Deskripsi kamu membutuhkan tag <div> dengan class .info-box__description. Didalamnya kamu bisa menambahkan judul dari Info Box dengan tag <h2>. Kemudian dibawah judul kamu bisa menambahkan semacam informasi utama dari judul menggunakan tag <h1>, misalnya judul Info Box adalah Anggota maka informasi utamanya adalah jumlah Anggota, yang biasanya ditulis dalam bentuk angka. Terakhir dibawah informasi utama kamu juga bisa menambahkan waktu dengan menggunakan tag <time>. Dan yang paling penting letakkan Deskripsi setelah Icon!.

Ketiga, Button. Membuat button untuk detail dari Info Box, kamu hanya perlu tag <a> dengan class .info-box__btn-detail, didalamnya kamu bisa meletakkan icon dari font awesome menggunakan tag <span>. Dan jangan lupa untuk meletakkan Button setelah Deskripsi!.

Jika kamu merasa Info Box-nya terlalu lebar, kamu bisa meletakkannya didalam grid gistem Bootstrap.

Pesanan

1200

Produk

520

Suka

400

Anggota

120

CopyHTML
<div class="col-md-6 mb-2">
    <section class="info-box info-box--blue">
        <div class="info-box__icon"><span class="fa fa-shopping-bag"></span></div>
        <div class="info-box__description">
            <h2>Pesanan</h2>
            <h1>1200</h1>
            <time>2 Menit yang lalu</time>
        </div>
        <a class="info-box__btn-detail" href="#"><span class="fa fa-arrow-right"></span></a>
    </section>
</div>
<div class="col-md-6 mb-2">
    <section class="info-box info-box--green">
        <div class="info-box__icon"><span class="fa fa-shopping-cart"></span></div>
        <div class="info-box__description">
            <h2>Produk</h2>
            <h1>520</h1>
            <time>5 Menit yang lalu</time>
        </div>
        <a class="info-box__btn-detail" href="#"><span class="fa fa-arrow-right"></span></a>
    </section>
</div>
<div class="col-md-6 mb-2 mb-md-0">
    <section class="info-box info-box--orange">
        <div class="info-box__icon"><span class="fa fa-thumbs-up"></span></div>
        <div class="info-box__description">
            <h2>Like</h2>
            <h1>400</h1>
            <time>2 Menit yang lalu</time>
        </div>
        <a class="info-box__btn-detail" href="#"><span class="fa fa-arrow-right"></span></a>
    </section>
</div>
<div class="col-md-6">
    <section class="info-box info-box--red">
        <div class="info-box__icon"><span class="fa fa-users"></span></div>
        <div class="info-box__description">
            <h2>Anggota</h2>
            <h1>120</h1>
            <time>2 Menit yang lalu</time>
        </div>
        <a class="info-box__btn-detail" href="#"><span class="fa fa-arrow-right"></span></a>
    </section>
</div>