Tronic247 Material

Alerts

Edit this page

Usage

<div class="alert alert-primary" role="alert">
    <p class="alert-message">Lorem ipsum, dolor sit, amet consectetur adipisicing elit. </p>
</div>

With icons

<div class="alert alert-primary" role="alert">
    <div class="alert-icon"><i class="material-icons">info</i></div>
    <p class="alert-message">Lorem ipsum, dolor sit, amet consectetur adipisicing elit. </p>
    <div class="close-alert"><i class="material-icons">close</i></div>
</div>

With meta text

<div class="alert alert-primary" role="alert">
    <div class="alert-icon"><i class="material-icons">info</i></div>
    <div class="alert-message">
        Lorem ipsum, dolor sit, amet consectetur adipisicing elit. 
        <p class="alert-meta">Lorem ipsum, dolor sit, amet consectetur adipisicing elit. </p>
    </div>
</div>

With action button

<div class="alert alert-primary" role="alert">
    <div class="alert-icon"><i class="material-icons">info</i></div>
    <div class="alert-message">
        Lorem ipsum, dolor sit, amet consectetur adipisicing elit. 
        <p class="alert-meta">Lorem ipsum, dolor sit, amet consectetur adipisicing elit. </p>
    </div>
    <div class="close-alert"><button class="text small btn">action</button></div>
</div>

Filled alerts

<div class="alert alert-primary alert-filled" role="alert">
    <div class="alert-icon"><i class="material-icons">info</i></div>
    <div class="alert-message">
        Lorem ipsum, dolor sit, amet consectetur adipisicing elit. 
        <p class="alert-meta">Lorem ipsum, dolor sit, amet consectetur adipisicing elit. </p>
    </div>
</div>

Different colors

<div class="alert alert-primary" role="alert">
    <p class="alert-message">.alert-primary</p>
</div>
<div class="alert alert-secondary" role="alert">
    <p class="alert-message">.alert-secondary</p>
</div>
<div class="alert alert-success" role="alert">
    <p class="alert-message">.alert-success</p>
</div>
<div class="alert alert-danger" role="alert">
    <p class="alert-message">.alert-danger</p>
</div>
<div class="alert alert-dark" role="alert">
    <p class="alert-message">.alert-dark</p>
</div>
<div class="alert alert-warning" role="alert">
    <p class="alert-message">.alert-warning</p>
</div>