Pagination
Add sections of content to your page that gain a pagination bar below them allows the visitor to move forwards or backwards through your content one section at a time.
- Choose to align Pagination navigation to the left, center or right of content
- Set navigation control to small, standard or large
- Localize text for First and Last buttons
- Show all navigation numbers or set a custom range
- Use color style presets from Control Center stack or choose custom colors
- Opt to bold active page number
- Choose an arrow style that matches your page
- Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.
Example
-
Section One
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
-
Section Two
LabelLorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
LabelLorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
-
Section Three
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
-
Section Four
Lorem ipsum dolor sit amet, sapien platea morbi lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, ante dolor sed mauris.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. -
Section Five
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
-
Section Six
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Using Pagination
Navigation
Alignment
Allows you to align Paginations controls to the left, center or right of the stack’s content.
As of Foundry v2 you can opt to giver the Pagination controls a different alignment at each of the three breakpoints. v2
Navigation Size
Choose whether you want your Pagination navigation to be small, standard or large.
Style
By default the Pagination stack styles its elements using the page presets for Pagination in the Control Center stack. You can also opt to use the Custom styling which will allow you to adjust each element on your own using color pickers. Here’s a look at the various color picker sections:
- Base: Set the color of your navigation's base background, border and text.
- Disabled: Change the coloring arrows and "first" and "last" buttons when they are disabled.
- Active: Chose the coloring of the buttons and numbers in the Pagination stack when they are selected.
- Hover: Lets you select the color you wish the buttons and numbers to have when they are hovered over.
Bold Active Number
Enabling this feature helps to distinguish the active page number in the navigation by bolding it.
First & Last Buttons
Choose whether you wish to display "First" and "Last" buttons in your navigation. Visitors clicking these will be taken to the first or last page in the Pagination stack.
First & Last Button Localization
Allows you to set the words you like to use for the "First" and "Last" buttons in the navigation if you have them enabled.
Arrows
Choose the style of arrows for your navigation that will match your project.
Nav. Numbers
Opt to show navigation numbers for all sections in your Pagination stack or set a custom range of numbers to display.
Customization
Some of the Modal's styling is customizable within the Foundry Control Center stack.