Load More

Button-triggered pagination pattern. A simpler alternative to infinite scroll for content feeds.

<rhx-load-more>

Examples

Basic Load More

Item 1

Item 2

Item 3

Item 4

Item 5

<div id="item-list">
    @foreach (var item in Model.Items)
    {
        <div class="rhx-card" style="padding: var(--rhx-space-md); margin-bottom: var(--rhx-space-xs);">@item</div>
    }
</div>
<rhx-load-more page="/Docs/Components/LoadMore" page-handler="LoadMore"
               route-page="2" target="#item-list">
    Load more items
</rhx-load-more>

Brand Variant

Item 1

Item 2

<rhx-load-more page="/Docs/Components/LoadMore" page-handler="LoadMore"
               route-page="2" target="#item-list2" rhx-variant="brand">
    Show more
</rhx-load-more>