#Overview

A Section End communicates the end, or temporary end, of a list of items.

#When to use

• To indicate the end, or temporary end, of a list of items
• To indicate the user’s current position within a list
• To allow the user to load more items on the same page, or redirect to a relevant subpage
• Product list
• Community (discussions, blog comments, ratings and Q&A)
• Purchases and Sales pages such as orders, credit notes and resale

#Don’t use for

• Non-list content

#Anatomy

All elements in a Section End are interchangeable and are therefore all optional.

1. Counter (visible from 7+ items): Helps the user understand their current position within a list or document and indicates how much content remains until the end
2. Progress bar: A visible indicator to complement the counter, only displayed with a “Show more” button.
3. Button: Action to load more items on the current page or redirect users to a relevant subpage.
4. Legal link: Explains the criteria and methods used for displaying specific products or comments
5. Elevator (visible from 7+ items): Swiftly transports the user back to the top of the section

#Spacing

1. Mobile
2. Desktop

#Best practices

#The button should be active

Do

If a button is included, it should always be active to indicate that more items can be loaded or a relevant subpage is available.

Don't

Do not use a disabled button. If there is no action to take, don’t include a button at all.

#Only use an elevator if content can scroll

Do

An elevator allows the user to swiftly scroll back to the top of the section.

Don't

Do not display an elevator if the page is so short that it doesn’t scroll.

#One elevator per page

Do

Only one elevator should be visible on a page.

Don't

Do not use multiple elevators on the same page.

#Placement

#Mobile

#Desktop

#Variations

#Legal link only

Used for up to 6 items. Either only the legal link is displayed or there is no pagination at all.

#Static

Used for content lists that are long enough to require scrolling, but are still manageable without the need to load more items. The progress bar and button are not required.

The number of items varies depending on the context. For example:

• 7 to 24 items on Sector pages
• 7 to 24 items on Tag pages
• 7 to 48 items on Product Type pages
• 7 to 30 items on Community pages

#Limited

The button takes the user to a new page. Used for up to 6 items. If the user clicks the button to load the new page, further items are displayed. The elevator is not required.

The number of items the button loads varies depending on the context. For example:

• Displays 60 additional items on a new page for Sector, Tag and Product Type pages
• Displays 48 additional items on a new page for Community pages

#Standard

The button loads additional items on the same page. The number of items that this Section End is used for is the same as the “Static pagination” variant.

The number of items the button loads varies depending on the context. For example:

• Displays 60 additional items on a new page for Product Type, Tag and Sector pages
• Displays 48 additional items on a new page for Community pages

#Page-end

Signals to users that they have reached the end of the content. No actions are required, except for an elevator which can be used for 7 or more items.