{{!--<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"}}
<span class="slds-pill"><a href="javascript:void(0)" class="slds-pill__label" title="Pill 1">Pill 1</a>
    <button class="slds-button slds-button--icon slds-pill__remove" title="Remove" data-aljs-dismiss="pill">
        <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Remove</span>
    </button>
</span>
<span class="slds-pill"><a href="javascript:void(0)" class="slds-pill__label" title="Pill 2">Pill 2</a>
    <button class="slds-button slds-button--icon slds-pill__remove" title="Remove" data-aljs-dismiss="pill">
        <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Remove</span>
    </button>
</span>
<span class="slds-pill"><a href="javascript:void(0)" class="slds-pill__label" title="Pill 3">Pill 3</a>
    <button class="slds-button slds-button--icon slds-pill__remove" title="Remove" data-aljs-dismiss="pill">
        <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Remove</span>
    </button>
</span>
{{/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="pill"</code></th>
                        <td data-label="Outcome">Assigns the role of dismissing the containing pill 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>
        <p class="slds-m-bottom--medium">The following method of initializing supports markup added to the DOM post-initialization.</p>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
   $('body').pill();
});
{{/aljs-pre-container}}
        <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>dismissed.aljs.pill</code></th>
                        <td data-label="Element">The dismissed <code>.slds-pill</code></td>
                        <td data-label="Trigger">A pill is dismissed</td>
                    </tr>
                </tbody>
            </table>
        </div>
    {{!--</div>
</div>--}}