Pagination

Add sections of content to your page that gain a pagination bar below and allows your visitors to move forwards or backwards through your content one section at a time.

Examples

Minimal & Accessible

This basic example of Pagination contains four "pages" of content that can be navigation using the numbered nav items or the Previous / Next arrow buttons. This type of pagination system allows for a clean, accessible design with little effort.

  • Page One

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Page Two

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Page Three

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Page Four

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The unknown future rolls toward us. I face it for the first time with a sense of hope.

Pagination is a great way to get a lot of content into a small area. This type of layout also provides your visitor with an expectation of how much content they can expect and how far they have to go within that range of content.

NOTE. The Pagination tool uses jQuery for some of its functionality on the backend.

Settings

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

General

Include Base Margin

When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.

Navigation Styling

Normal Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of navigation items that are not active or hoverd over. You're also provided an option to choose a custom one-off color as well.

Normal Border

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border of navigation items that are not active or hoverd over. You're also provided an option to choose a custom one-off color as well.

Normal Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of navigation items that are not active or hoverd over. You're also provided an option to choose a custom one-off color as well.

Disabled Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of navigation items that are not active and not able to be selected. You're also provided an option to choose a custom one-off color as well.

Active Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of navigation items that are currenlty active or are being hoverd over. You're also provided an option to choose a custom one-off color as well.

Normal Border

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border of navigation items that are currenlty active or are being hoverd over. You're also provided an option to choose a custom one-off color as well.

Active Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of navigation items that are currenlty active or are being hoverd over. You're also provided an option to choose a custom one-off color as well.

Bold Active Number

Enabling this feature will bold the number that is indicating the current active page within Pagination. This helps it to stand out a bit beyond just the active item styling.

Navigation Toggles

Include Previous / Next Buttons

This setting allows you to add Previous and Next buttons to the left, and right of the navigation bar of page numbers. This is helpful in allowing your visitors to easily advance to the next page or return to the previous one.

Previous / Next Type

Here you can choose the type of Previous / Next buttons to include when the feature is enabled. You can choose from a few arrow styles or simply use Text indicators instead.

Include First / Last Buttons

When enabled buttons will be added to the left and right sides of the page navigation bar that allow your visitors to jump to the first or last page in the Pagination tool. This is less common and is off by default.

First / Last Labels

Here you can provide the text you'd like to use for the First / Last buttons when enabled.

Page Count

Adds an indicator to the navigation bar that shows the visitor what page they are currently on out of how many total pages. This is off by default.

Show Disabled Cursor

Changes the mouse cursor to a disabled pointer state when it hovers over a Pagination navigation bar link that is disabled.

Navigation Numbers

Navigation Numbers

Here you can choose how many pagination page numbers will be visible in the navigation bar area. The default is to show all page numbers. This can be a bit too much if you have a lot of pages within Pagination. In that event you can customize the number of visible pages using the Custom option.

Navigation Size

Size

Adjust the size of the Pagination navigation using one of the Foundry preset sizes.

Alignment

Alignment (Uniform)

This setting allows you to align the navigation to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.

Alignment (Non-Uniform)

Clicking on the small plus icon will give you the ability to adjust the alignment of the navigation independently at each of the 6 responsive breakpoints giving you more granular control.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.