# Load more

> One navy button under a card grid that shows the next page of cards, with the count above it.

- Block class: `.hs-load-more`
- CSS: `components/pager.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2b.html
- Variants: Load more
- HTML page: https://brand.honorsociety.org/components/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](/components/pager/).
- When the list has nothing in it, use the [Empty state](/components/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.

```html
<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>
```