<!-- SASS: src/stylesheets/_components/load-more.scss -->
<!-- JS: src/js/load-more.js -->

<div class="vaux-sectioned-content" data-load-more-trigger>
    <section>
        <h3>Content Section</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare mauris ut quam lacinia auctor. Etiam ac tincidunt velit. Morbi in aliquam est, et interdum ex. Nulla tempus mollis purus, nec condimentum nibh. Quisque a feugiat magna, in suscipit
            est. Donec eget lacus ut nulla fermentum cursus quis in turpis.</p>
    </section>
    <section>
        <h3>Another Section</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare mauris ut quam lacinia auctor. Etiam ac tincidunt velit. Morbi in aliquam est, et interdum ex. Nulla tempus mollis purus, nec condimentum nibh. Quisque a feugiat magna, in suscipit
            est. Donec eget lacus ut nulla fermentum cursus quis in turpis.</p>

        <p>Etiam ac tincidunt velit. Morbi in aliquam est, et interdum ex. Nulla tempus mollis purus, nec condimentum nibh. Quisque a feugiat magna, in suscipit est. Donec eget lacus ut nulla fermentum cursus.</p>
    </section>

    <button data-loading-trigger data-loader="inline" data-color="inverted" type="button">Load More</button>
</div>

<style scoped>
    [type=button] {
        display: block;
        margin: 0 auto;
    }
</style>