{{!--<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">Method 1: Include All ALJS Plugins With Included Moment Dependency</h4>
        <div class="slds-p-left--x-large">
            <h5 class="site-text-heading--small">Include the <code>jquery.aljs-all-with-moment.min.js</code> File</h5>
            <p class="slds-m-bottom--medium">The provided <code>all</code> file includes all ALJS plugins including Moment (required by the datepickers component) and must be included in your markup after jQuery.</p>
{{#aljs-pre-container type="vf"}}
<script src="path-to-jquery.js"></script>
<script src="{!URLFOR($Resource.aljs, '/jquery.aljs-all-with-moment.min.js')}"></script>
{{/aljs-pre-container}}
        </div>
        <h4 class="site-text-heading--medium">Method 2: Include All ALJS Plugins Without Included Moment Dependency</h4>
        <div class="slds-p-left--x-large">
            <h5 class="site-text-heading--small">Include your own version of <a href="http://momentjs.com/" target="_blank">moment.js</a></h5>
            <p>The datepickers component requires this dependency.</p>
            <h5 class="site-text-heading--small">Include the <code>jquery.aljs-all.min.js</code> File</h5>
            <p class="slds-m-bottom--medium">The provided <code>all</code> file includes all ALJS plugins and must be included in your markup after jQuery.</p>
{{#aljs-pre-container type="vf"}}
<script src="path-to-jquery.js"></script>
<script src="{!URLFOR($Resource.aljs, '/jquery.aljs-all.min.js')}"></script>
{{/aljs-pre-container}}
        </div>
        <h4 class="site-text-heading--medium">Method 3: Include Individual ALJS Plugins</h4>
        <div class="slds-p-left--x-large">
            <h5 class="site-text-heading--small">Include the <code>jquery.aljs-init.min.js</code> File</h5>
            <p class="slds-m-bottom--medium">The provided <code>init</code> file establishes common settings for each plugin to reference and must be included in your markup after jQuery.</p>
{{#aljs-pre-container type="vf"}}
<script src="path-to-jquery.js"></script>
<script src="{!URLFOR($Resource.aljs, '/jquery.aljs-init.min.js')}"></script>
{{/aljs-pre-container}}
        <h5 class="site-text-heading--small">Include the ALJS Plugins You Wish to Use</h5>
{{#aljs-pre-container type="vf"}}
<script src="{!URLFOR($Resource.aljs, '/jquery.aljs-modal.min.js')}"></script>
<script src="{!URLFOR($Resource.aljs, '/jquery.aljs-pill.min.js')}"></script>
<script src="{!URLFOR($Resource.aljs, '/jquery.aljs-tooltip.min.js')}"></script>
{{/aljs-pre-container}}
        </div>
    <h4 class="site-text-heading--medium" id="override">Override Default Settings (Optional)</h4>
    <p class="slds-m-bottom--medium">Edit the ALJS settings with your own. If you are in a Visualforce Page, you will want scoped to equal <code>true</code>, otherwise use <code>false</code></p>
{{#aljs-pre-container type="vf"}}
<script>
    $.aljsInit({
        assetsLocation: assetsLocation,
        scoped: true,
        scopingClass: 'slds-scope'
    });
</script>
{{/aljs-pre-container}}
    <p class="slds-m-top--medium">This table details the options available for overriding the ALJS Common Settings.</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">Option</th>
                    <th scope="col">Behavior</th>
                    <th scope="col">Values</th>
                    <th scope="col">Default value</th>
                    <th scope="col">Comments</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row"><code>assetsLocation</code></th>
                    <td data-label="Behavior">Specifies the directory containing SLDS's <code>assets</code> directory</td>
                    <td data-label="Accepted values">Any string</td>
                    <td data-label="Default value" class="slds-cell-shrink"><code>''</code></td>
                    <td data-label="Comments" class="slds-cell-shrink">The default value represents the root of the site; use '.' to select the same directory as the current page</td>
                </tr>
                <tr>
                    <th scope="row"><code>scoped</code></th>
                    <td data-label="Behavior">Specifies whether or not the page's styles are scoped using the class determined by the <code>scopingClass</code> property</td>
                    <td data-label="Accepted values"><code>true</code>, <code>false</code></td>
                    <td data-label="Default value" class="slds-cell-shrink"><code>true</code></td>
                    <td data-label="Comments" class="slds-cell-shrink"></td>
                </tr>
                <tr>
                    <th scope="row"><code>scopingClass</code></th>
                    <td data-label="Behavior">Specifies the class of the scope</td>
                    <td data-label="Accepted values">Any string</td>
                    <td data-label="Default value" class="slds-cell-shrink"><code>slds-scope</code></td>
                    <td data-label="Comments" class="slds-cell-shrink">The value should represent a single class name</td>
                </tr>
            </tbody>
        </table>
    </div>
    <h4 class="site-text-heading--medium">Initialize the Plugins</h4>
    <p class="slds-m-bottom--medium">Please visit the individual component pages for instructions on how initialize each plugin.</p>