Load more

What it is

One navy button under a card grid, with the count above it. The label names what comes next (“Show the next 12 articles”), never “See more” or “Load more”. Ship it as a link to the next page.

When to use

• Under the article card grid on /articles.
• Under the card grid of the Elevate magazine.

When not to use

• When the reader needs to reach a given page by number, use the Numbered pager.
• When the list has nothing in it, use the Empty state.

Rules

• Markup: div.hs-load-more holds p.hs-load-more__status, then a.hs-button.hs-button--navy.
• The status gives the count: “Showing 12 of 48 articles”.
• The label names what comes next: “Show the next 12 articles”. Never “See more” or “Load more”: “more” is a banned noun.
• Ship it as a link to the next page (?page=2). A script may then append the cards in place.
• Use the navy button only. A ghost or outline button breaks house style, the secondary pill is for card and dialog actions, and a text link is easy to miss under large cards.
• Below 36rem the button is full width.

Accessibility

• The button is a real link, so it works without JavaScript.
• White on navy is 12.4:1.
• The status line tells the reader how far through the list they are.

Variants

Load more

Full width on a phone.

<div class="hs-load-more"><p class="hs-load-more__status">Showing 12 of 48 articles</p><a class="hs-button hs-button--navy" href="?page=2">Show the next 12 articles</a></div>