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">&times;</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">&times;</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">&times;</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>

Examples

1. App-Level Alert in the main-container
A new update is now available. Upgrade to v.1234.
Header

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">&times;</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>
2. Custom Icon in an App-Level Alert
A new update is now available. Upgrade to v.1234.
Header

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">&times;</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>