Alert

<!-- Alert -->
<div class="js-alert alert" id="alert" role="alert" data-time="2019-10-18 14:52:4" aria-labelledby="alert_title" tabindex="-1" aria-atomic="true">
    <div class="alert_inner">
        <div class="alert_header">
            <h2 class="alert_title" id="alert_title" tabindex="-1">
                <span class="alert_title_icon">
                    <i class="fa-regular fa-circle-exclamation"></i>
                </span>
                <span class="alert_title_label">This is a site-wide alert</span>
            </h2>
        </div>
        <div class="alert_body">
            <div class="alert_description typography">
                <p>This alert can have up to two lines of additional information. For additional context and followup information <a href>include a link</a>.</p>
            </div>
        </div>
        <button class="js-alert-close alert_close">
            <span class="alert_close_inner">
                <span class="alert_close_label">Hide</span>
                <span class="alert_close_icon" aria-hidden="true">
                    <i class="fa-regular fa-circle-chevron-down"></i>
                </span>
            </span>
        </button>
    </div>
    <div class="alert_open_toggle">
        <button class="js-alert-open alert_open">
            <span class="alert_open_inner">
                <span class="alert_open_icon" aria-hidden="true">
                    <i class="fa-regular fa-chevron-up"></i>
                </span>
                <span class="alert_open_label">Show</span>
            </span>
        </button>
    </div>
</div>
<!-- END: Alert -->