Alerts
Click to preview the Alerts demo. View demo
Alert Style 01
Code:
html
<div class="alert alert dg-alert01 alert-accent fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
Suspendisse libero turpis, venenatis eget scelerisque!
</div>
<div class="alert dg-alert01 alert-primary radius fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa fa-volume-down"></span>
Ut pellentesque scelerisque augue, a faucibus ipsum volutpat congue!
</div>
<div class="alert dg-alert01 alert-success fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
Libero sagittis mattis, morbi at mauris eu mauris facilisis sollicitudin!
</div>
<div class="alert dg-alert01 alert-info radius fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-bell-slash-o"></span>
Suspendisse libero turpis, venenatis eget scelerisque!
</div>
<div class="alert dg-alert01 alert-warning fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus!
</div>
<div class="alert dg-alert01 alert-danger radius fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-send-o"></span>
Vivamus sed magna quis ligula eleifend adipiscing!
</div>Alert Style 02
Code:
html
<div class="alert dg-alert02 alert-accent fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<h6>Your message comes here</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque ultrices posuere!</p>
</div>
<div class="alert dg-alert02 alert-success fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<h6>Your message comes here</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque ultrices posuere!</p>
</div>
<div class="alert dg-alert02 alert-primary fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<h6>Your message comes here</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque!</p>
</div>
<div class="alert dg-alert02 alert-danger fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<h6>Your message comes here</h6>
<p>Praesent eros mi, mattis pharetra convallis pharetra, hendrerit cursus felis!</p>
</div>Alert Style 03
Code:
html
<div class="alert dg-alert02 alert-accent alert-box fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-volume-up"></span>
<h6>Aenean lacinia</h6>
<p>Praesent eros mi, mattis pharetra convallis pharetra, hendrerit cursus felis!</p>
</div>
<div class="alert dg-alert02 alert-success alert-box fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-umbrella"></span>
<h6>Aenean lacinia</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque!</p>
</div>
<div class="alert dg-alert02 alert-danger alert-box fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-thumb-tack"></span>
<h6>Aenean lacinia</h6>
<p>Praesent eros mi, mattis pharetra convallis pharetra, hendrerit cursus felis!</p>
</div>
<div class="alert dg-alert02 alert-info alert-box fade alert-fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-unlink"></span>
<h6>Aenean lacinia</h6>
<p>Pellentesque mi felis, vehicula sit amet lacinia at, dapibus non lorem!</p>
</div>Alert Style 04
Code:
html
<div class="alert dg-alert03 alert-accent fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-clock-o"></span>
<h6>Your message comes here</h6>
<p>Pellentesque mi felis, vehicula sit amet lacinia at, dapibus non lorem!</p>
</div>
<div class="alert dg-alert03 alert-info fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-clock-o"></span>
<h6>Your message comes here</h6>
<p>Pellentesque mi felis, vehicula sit amet lacinia at, dapibus non lorem!</p>
</div>
<div class="alert dg-alert03 alert-warning fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-check-circle"></span>
<h6>Your message comes here</h6>
<p>Pellentesque mi felis, vehicula sit amet lacinia at, dapibus non lorem!</p>
</div>
<div class="alert dg-alert03 alert-ban fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-check-circle"></span>
<h6>Your message comes here</h6>
<p>Pellentesque mi felis, vehicula sit amet lacinia at, dapibus non lorem!</p>
</div>
<div class="alert dg-alert03 alert-success fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-exclamation-triangle"></span>
<h6>Your message comes here</h6>
<p>Pellentesque mi felis, vehicula sit amet lacinia at, dapibus non lorem!</p>
</div>
<div class="alert dg-alert03 alert-bell-slash-o fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-exclamation-triangle"></span>
<h6>Your message comes here</h6>
<p>Pellentesque mi felis, vehicula sit amet lacinia at, dapibus non lorem!</p>
</div>Alert Style 05
Code:
html
<div class="alert dg-alert04 alert-success"><span class="icon fa fa-info"></span>
<h6>VESTIBULUM ANTE IPSUM PRIMIS</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestibulum ante ipsum sffg.</p>
</div>
<div class="alert dg-alert04 alert-primary"><span class="icon fa fa-check"></span>
<h6>DONEC SOLLICITUDIN MI SIT AMET MAURIS</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque stium ante ipsum pri sja.</p>
</div>
<div class="alert dg-alert04 alert-accent"><span class="icon fa fa-unlock"></span>
<h6>PROIN ELIT ARCU, RUTRUM COMMODO</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque, stibulum ante ipsum pri.</p>
</div>
<div class="alert dg-alert04 alert-warning"><span class="icon fa fa-mail-forward"></span>
<h6>UT LACUS MI, EGESTAS QUIS VIVERRA</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque stium ante ipsum pri sja.</p>
</div>
<div class="alert dg-alert04 alert-danger"><span class="icon fa fa-times"></span>
<h6>NUNC ORNARE ADIPISCING ORCI EU</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestibulum ante ip.</p>
</div>
<div class="alert dg-alert04 alert-info"><span class="icon fa fa-key"></span>
<h6>DUIS ALIQUAM MOLESTIE ERAT</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque stium ante ipsum pri sja.</p>
</div>Alert Style 06
Code:
html
<div class="alert dg-alert05 alert-success fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-info"></span>
<h6>VESTIBULUM ANTE IPSUM PRIMIS</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque, tibulum ante.</p>
</div>
<div class="alert dg-alert05 alert-primary fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-check"></span>
<h6>DONEC SOLLICITUDIN MI SIT AMET MAURIS</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque stium ante.</p>
</div>
<div class="alert dg-alert05 alert-accent fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-unlock"></span>
<h6>PROIN ELIT ARCU, RUTRUM COMMODO</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque, stibulum ante.</p>
</div>
<div class="alert dg-alert05 alert-warning fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-mail-forward"></span>
<h6>UT LACUS MI, EGESTAS QUIS VIVERRA</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque stium ante.</p>
</div>
<div class="alert dg-alert05 alert-danger fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-times"></span>
<h6>NUNC ORNARE ADIPISCING ORCI EU</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestibulum ante ip.</p>
</div>
<div class="alert dg-alert05 alert-info fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-key"></span>
<h6>DUIS ALIQUAM MOLESTIE ERAT</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque stium ante.</p>
</div>Alert Style 07
Code:
html
<div class="alert dg-alert06 alert-success fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-info"></span>
<h6>VESTIBULUM ANTE IPSUM PRIMIS</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestibulum ante ipsum.</p>
</div>
<div class="alert dg-alert06 alert-primary fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-check"></span>
<h6>DONEC SOLLICITUDIN MI SIT AMET MAURIS</h6>
<p>Suspendisse libero turpis, venenatis eget sceler stibulum ante ipsum.</p>
</div>
<div class="alert dg-alert06 alert-accent fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-unlock"></span>
<h6>PROIN ELIT ARCU, RUTRUM COMMODO</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque, stibulum ante ipsum pri.</p>
</div>
<div class="alert dg-alert06 alert-warning fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-mail-forward"></span>
<h6>UT LACUS MI, EGESTAS QUIS VIVERRA </h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestibulum ante.</p>
</div>
<div class="alert dg-alert06 alert-danger fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-times"></span>
<h6>NUNC ORNARE ADIPISCING ORCI EU</h6>
<p>Suspendisse libero turpis, venenatis eget que,Vestibulum ante ipsum iade sf.</p>
</div>
<div class="alert dg-alert06 alert-info fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-key"></span>
<h6>DUIS ALIQUAM MOLESTIE ERAT</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestibulum ante ipsum.</p>
</div>
<div class="alert dg-alert07 alert-danger fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-plane"></span>
<h6>YOUR MESSAGE TITLE HERE</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestib ipsum primis in faucibus orci luctus et ultrices!</p>
</div>
<div class="alert dg-alert07 alert-warning fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-question"></span>
<h6>YOUR MESSAGE TITLE HERE</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestib ipsum primis in faucibus orci luctus et ultrices!</p>
</div>
<div class="alert dg-alert07 alert-success fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-envelope"></span>
<h6>YOUR MESSAGE TITLE HERE</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestib ipsum primis in faucibus orci luctus et ultrices!</p>
</div>
<div class="alert dg-alert07 alert-accent fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-info-circle"></span>
<h6>YOUR MESSAGE TITLE HERE</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestib ipsum primis in faucibus orci luctus et ultrices!</p>
</div>
<div class="alert dg-alert08 alert-danger radius fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-warning"></span>
<h6>Nunc tincidunt</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestib ipsum primis in faucibus orci luctus et ultrices!</p>
</div>
<div class="alert dg-alert08 alert-warning radius fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-arrow-circle-o-down"></span>
<h6>Nunc tincidunt</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestib ipsum primis in faucibus orci luctus et ultrices!</p>
</div>
<div class="alert dg-alert08 alert-success radius fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-chevron-circle-down"></span>
<h6>Nunc tincidunt</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestib ipsum primis in faucibus orci luctus et ultrices!</p>
</div>
<div class="alert dg-alert08 alert-accent radius fade in">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<span class="icon fa fa-ban"></span>
<h6>Nunc tincidunt</h6>
<p>Suspendisse libero turpis, venenatis eget scelerisque,Vestib ipsum primis in faucibus orci luctus et ultrices!</p>
</div>