Alert banner

Code

<!-- Replace {alert-type class} below with one of the following alert type classes:
     `warning` or `error`, `caution`, `information`, `success` -->
<div class="cui alert-banner global {alert-type class}" role="alertdialog" aria-labelledby="alert-title-id" aria-describedby="alert-desc-id">
    <div class="alert-header">
        <!-- Replace {alert-icon-class} below with an appropriate 'cicon-*' class name for the alert type -->
        <span class="alert-icon {alert-icon-class}" aria-hidden="true"></span>

        <!-- Replace {Alert Type} below to match the {alert-type class} above:
             'Warning' or 'Error', 'Caution', 'Information', 'Success' -->
        <h2 id="alert-title-id" class="alert-title">{Alert Type} | Title consectetur adipiscing elit in eu tincidunt dolor a vulputate</h2>

        <!-- Optional alert action buttons to close or minimize the alert. Use only one per alert.
             JavaScript is required; see example JavaScript below.
        <!-- Optional minimize alert button -->
        <button class="alert-action-btn cui btn-md" data-action="close"><span class="text">Close</span><span class="cicon-close-thin-large right"></span></button>

        <!-- Optional close alert button -->
        <button class="alert-action-btn cui btn-md" data-action="minimize"><span class="text">Minimize</span><span class="cicon-minuse-thin right"></span></button>
    </div>
    <div class="alert-body">
        <p id="alert-desc-id">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean magna nisl, finibus eget vulputate eu, mattis in eros. Nullam rhoncus pulvinar lectus, sed faucibus nisl lobortis eget.</p>

        <!-- Optional call-to-action links -->
        <a class="cui btn-sm utility-btn" href="page.html">Call to action</a>
        <a class="cui btn-sm secondary-text" href="page.html">Secondary call to action</a>
    </div>
</div>

<!-- Example JS to configure the close or minimize alert buttons -->
<script src="jquery-2.2.4.min.js"></script>
<script>
    $( document ).ready( function() {
        $( '.alert-action-btn' ).click( function() {
            var btn = $( this );
            var actionType = btn.attr( 'data-action' );
            var alertEl = btn.parents( '.alert-banner' );
            if ( actionType === 'close' ) {
                alertEl.hide();
            }
            else if ( actionType === 'minimize' ) {
                var alertBody = alertEl.find( '.alert-body' );
                var btnText = btn.find( '.text' );
                var btnIcon = btn.find( '[class*="cicon-"]' );
                if ( alertBody.is( ':visible' ) ) {
                    alertBody.hide();
                    btnText.text( 'Expand' );
                    btnIcon.attr( 'class', 'right cicon-plus-thin' );
                }
                else {
                    alertBody.show();
                    btnText.text( 'Minimize' );
                    btnIcon.attr( 'class', 'right cicon-minus-thin' );
                }
            }
        });
    });
</script>

Usage

Please DO

• Keep the title short
• Ensure the description is clear
• Use simple and direct language for the call-to-action

Please DON'T

• Write a long title
• Forget to write a description
• Make the call-to-action text too long

Code

<!-- Short inline variant -->
<!-- Replace {alert-type class} below with one of the following alert type classes:
     `warning` or `error`, `caution`, `information`, `success` -->
<div class="cui alert-banner inline {alert-type class}" role="alertdialog" aria-labelledby="alert-title-inline-1">
    <div class="alert-body">
        <!-- Replace {alert-icon-class} below with an appropriate 'cicon-*' class name for the alert type -->
        <span class="alert-icon {alert-icon-class}" aria-hidden="true"></span>

        <!-- Replace {Alert Type} below to match the {alert-type class} above:
             'Warning' or 'Error', 'Caution', 'Information', 'Success' --&gt;
        <h2 id="alert-title-inline-1" class="alert-title">{Alert Type}<span class="font-weight-normal"> | Lorem ipsum dolor sit amet consectetur adipiscing <a href="#">Call to action</a></span></h2>
    </div>
</div>

<!-- Long inline variant -->
<!-- Replace {alert-type class} below with one of the following alert type classes:
     `warning` or `error`, `caution`, `information`, `success` -->
<div class="cui alert-banner inline {alert-type class}" role="alertdialog" aria-labelledby="alert-title-inline-2" aria-describedby="alert-desc-inline-2">
    <div class="alert-body">
        <!-- Replace {alert-icon-class} below with an appropriate 'cicon-*' class name for the alert type -->
        <span class="alert-icon {alert-icon-class}" aria-hidden="true"></span>

        <!-- Replace {Alert Type} below to match the {alert-type class} above:
             'Warning' or 'Error', 'Caution', 'Information', 'Success' -->
        <h2 id="alert-title-inline-2" class="alert-title">{Alert Type} | Lorem ipsum dolor sit amet consectetur adipiscing</h2>
        <p id="alert-desc-inline-2">Pellentesque at dui ullamcorper, viverra ligula nec, fermentum nisi. In eu tincidunt dolor, a vulputate metus.</p>
        <a href="#" class="cui btn-sm utility-btn">Call to action</a>
    </div>
</div>