Alert Type: Danger
Alert Type: Warning
Alert Type: Info
<div class="alert alert-app-level alert-danger">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="alert-item">
<div class="alert-text">
Alert Type: Danger
</div>
<div class="alert-actions">
<button class="btn alert-action">Action</button>
</div>
</div>
</div>
<div class="alert alert-app-level alert-warning">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="alert-item">
<div class="alert-text">
Alert Type: Warning
</div>
<div class="alert-actions">
<button class="btn alert-action">Action</button>
</div>
</div>
</div>
<div class="alert alert-app-level alert-info">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="alert-item">
<div class="alert-text">
Alert Type: Info
</div>
<div class="alert-actions">
<button class="btn alert-action">Action</button>
</div>
</div>
</div>
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
<div class="main-container">
<div class="alert alert-app-level alert-info">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="alert-item">
<div class="alert-text">
A new update is now available. Upgrade to v.1234.
</div>
<div class="alert-actions">
<button class="btn alert-action">Install Update</button>
</div>
</div>
</div>
<header class="header">
<div class="branding">
<span class="title">Header</span>
</div>
</header>
<div class="content-container">
<div class="content-area">
<p>...</p>
</div>
</div>
</div>
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
<div class="main-container">
<div class="alert alert-app-level alert-warning">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="alert-item">
<div class="clr-icon clr-icon-update"></div>
<div class="alert-text">
A new update is now available. Upgrade to v.1234.
</div>
<div class="alert-actions">
<button class="btn alert-action">Install Update</button>
</div>
</div>
</div>
<header class="header">
<div class="branding">
<span class="title">Header</span>
</div>
</header>
<div class="content-container">
<div class="content-area">
<p>...</p>
</div>
</div>
</div>