{{!--<div class="site-example--content slds-scrollable--x slds-tabs__content slds-show" role="tabpanel">
    <div class="slds-p-horizontal--medium">--}}
        <h4 class="site-text-heading--medium">Markup</h4>
{{#aljs-pre-container type="html"}}
<button id="open-notification" class="slds-button slds-button--neutral slds-m-bottom--medium">Open Notification</button>
<div id="alert-1" class="slds-notify slds-notify--alert slds-theme--inverse-text slds-theme--alert-texture slds-m-bottom--medium" role="alert">
    <button class="slds-notify__close slds-button slds-button--icon-inverse" data-aljs-dismiss="notification">
        <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="assets/icons/action-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
    </button>
    <span class="slds-assistive-text">Info</span>
    <h2>Base System Alert</h2>
</div>
<div id="alert-2" class="slds-notify slds-notify--alert slds-theme--error slds-hide" role="alert">
    <button class="slds-notify__close slds-button slds-button--icon-inverse" data-aljs-dismiss="notification">
        <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="assets/icons/action-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
    </button>
    <span class="slds-assistive-text">Info</span>
    <h2>You have encountered an error</h2>
</div>
</div>
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table gives you a quick overview of ALJS-specific markup applied to the SLDS component.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">ALJS Markup</th>
                        <th scope="col">Outcome</th>
                        <th scope="col">Required</th>
                        <th scope="col">Applied to</th>
                        <th scope="col">Comments</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>data-aljs-dismiss="notification"</code></th>
                        <td data-label="Outcome">Assigns the role of dismissing the containing notification on click</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-button</code></td>
                        <td data-label="Comments"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Initialize on Body</h4>
{{#aljs-pre-container type="js"}}
$(document).ready(function () {
    $('body').notification();
});
{{/aljs-pre-container}}
        <h4 class="site-text-heading--medium">Methods</h4>
{{#aljs-pre-container type="js"}}
$('#alert-1').notification('show');
$('#alert-1').notification('dismiss');
$('#alert-1').notification('toggle');
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table details the methods available for the jQuery function.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Method</th>
                        <th scope="col">jQuery object</th>
                        <th scope="col">Outcome</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>show</code></th>
                        <td data-label="jQuery object">The target notification</td>
                        <td data-label="Outcome">A notification is shown</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>dismiss</code></th>
                        <td data-label="jQuery object">The target notification</td>
                        <td data-label="Outcome">A notification is dismissed</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>toggle</code></th>
                        <td data-label="jQuery object">The target notification</td>
                        <td data-label="Outcome">A notification is shown/dismissed (opposite of its current state)</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Events</h4>
        <p>This table details the JavaScript events that trigger from user interaction.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Event</th>
                        <th scope="col">Element</th>
                        <th scope="col">Trigger</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>shown.aljs.modal</code></th>
                        <td data-label="Element">The <code>.slds-notify</code> being shown</td>
                        <td data-label="Trigger">A notification is shown</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>dismissed.aljs.modal</code></th>
                        <td data-label="Element">The <code>.slds-notify</code> being dismissed</td>
                        <td data-label="Trigger">A notification is dismissed</td>
                    </tr>
                </tbody>
            </table>
        </div>
    {{!--</div>
</div>--}}