Pagination HTML markup

Pagination is used to display numbers of pages in case content exceeds page limits. The markup corresponds to accesibility demands.

Required HTML markup:

<div class="pages"> <strong class="label" id="paging-label">Page</strong> <ul class="items" aria-labelledby="paging-label"> <li class="item"> <a href="1" class="action previous"> <span class="label">Page</span> <span>Previous</span> </a> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>1</span> </a> </li> <li class="item current"> <strong class="page"> <span class="label">You're currently reading page</span> <span>2</span> </strong> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>3</span> </a> </li> <li class="item"> <a href="1" class="action next"> <span class="label">Page</span> <span>Next</span> </a> </li> </ul> </div>

.pages {
    .lib-pager();
}

Pagination variables

    

        

            
Mixin variable
            
Global variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_pager-label-display
            
@pager-label__display
            
none
            
none | block | inline-block
            
The 'page' label is displayed
        
        

            
@_pager-item-display
            
@pager-item__display
            
inline-block
            
none | block | inline-block
            
The pager item label is displayed
        
        

            
@_pager-reset-spaces
            
@pager-reset-spaces
            
true
            
true | false
            
Reset spaces between inline-block elements if elements 'display' is set to 'inline-block'
        
        

            
@_pager-font-size
            
@pager__font-size
            
@font-size__s
            
'' | false | value
            
Pager font size
        
        

            
@_pager-font-weight
            
@pager__font-weight
            
@font-weight__bold
            
'' | false | value
            
Pager font weight
        
        

            
@_pager-line-height
            
@pager__line-height
            
32px
            
'' | false | value
            
Pager line height
        
        

            
@_pager-item-margin
            
@pager-item__margin
            
0 2px 0 0
            
'' | false | value
            
Pager item margin
        
        

            
@_pager-item-padding
            
@pager-item__padding
            
0 4px
            
'' | false | value
            
Pager item padding
        
        

            
@_pager-actions-padding
            
@pager-actions__padding
            
0
            
'' | false | value
            
Pager actions padding
        
        

            
Pager current page
        
        

            
@_pager-current-font-weight
            
@pager-current__font-weight
            
@font-weight__bold;
            
'' | false | value
            
Current page number font weight
        
        

            
@_pager-current-color
            
@pager-current__color
            
@primary__color
            
'' | false | value
            
Current page number color
        
        

            
@_pager-current-border
            
@pager-current__border
            
false
            
'' | false | value
            
Current page number border
        
        

            
@_pager-current-background
            
@pager-current__background
            
false
            
'' | false | value
            
Current page number background
        
        

            
@_pager-current-gradient
            
@pager-current__gradient
            
false
            
true | false
            
Current page number has gradient background
        
        

            
@_pager-current-gradient-direction
            
@pager-current__gradient-direction
            
false
            
'' | false | vertical | horizontal
            
Direction of current page number background gradient (if there is any)
        
        

            
@_pager-current-gradient-color-start
            
@pager-current__gradient-color-start
            
false
            
'' | false | value
            
Current page number gradient start color
        
        

            
@_pager-current-gradient-color-end
            
@pager-current__gradient-color-end
            
false
            
'' | false | value
            
Current page number gradient end color
        
        

            
Link to page number
        
        

            
@_pager-gradient
            
@pager__gradient
            
false
            
true | false
            
Pager items have gradient background
        
        

            
@_pager-gradient-direction
            
@pager__gradient-direction
            
'false
            
'' | false | vertical | horizontal
            
Direction of background gradient (if there is any) of pager item
        
        

            
Link to page number - default
        
        

            
@_pager-color
            
@pager__color
            
@link__color
            
'' | false | value
            
Pager item color
        
        

            
@_pager-border
            
@pager__border
            
false
            
'' | false | value
            
Pager item border
        
        

            
@_pager-text-decoration
            
@pager__text-decoration
            
none
            
'' | false | value
            
Pager item text decoration
        
        

            
@_pager-background
            
@pager__background
            
false
            
'' | false | value
            
Pager item background
        
        

            
@_pager-gradient-color-start
            
@pager__gradient-color-start
            
false
            
'' | false | value
            
Pager item gradient start color
        
        

            
@_pager-gradient-color-end
            
@pager__gradient-color-end
            
false
            
'' | false | value
            
Pager item gradient end color
        
        

            
Link to page number - visited
        
        

            
@_pager-color-visited
            
@pager__visited__color
            
@link__visited__color
            
'' | false | value
            
Pager item visited color
        
        

            
@_pager-border-visited
            
@pager__visited__border
            
false
            
'' | false | value
            
Pager item visited border
        
        

            
@_pager-background-visited
            
@pager__visited__background
            
false
            
'' | false | value
            
Pager item visited background
        
        

            
@_pager-gradient-color-start-visited
            
@pager__visited__gradient-color-start
            
false
            
'' | false | value
            
Pager item visited gradient start color
        
        

            
@_pager-gradient-color-end-visited
            
@pager__visited__gradient-color-end
            
false
            
'' | false | value
            
Pager item visited gradient end color
        
        

            
Link to page number - hover
        
        

            
@_pager-color-hover
            
@pager__hover__color
            
@link__hover__color
            
 
            
Pager item hover color
        
        

            
@_pager-border-hover
            
@pager__hover__border
            
false
            
'' | false | value
            
Pager item hover border
        
        

            
@_pager-text-decoration-hover
            
@pager__text-decoration
            
none
            
'' | false | value
            
Pager item hover text decoration
        
        

            
@_pager-background-hover
            
@pager__hover__background
            
false
            
'' | false | value
            
Pager item hover background
        
        

            
@_pager-gradient-color-start-hover
            
@pager__hover__gradient-color-start
            
false
            
'' | false | value
            
Pager item hover gradient start color
        
        

            
@_pager-gradient-color-end-hover
            
@pager__hover__gradient-color-end
            
false
            
'' | false | value
            
Pager item hover gradient end color
        
        

            
Link to page number - active
        
        

            
@_pager-color-active
            
@pager__active__color
            
@link__hover__color
            
'' | false | value
            
Pager item active color
        
        

            
@_pager-border-active
            
@pager__active__border
            
false
            
'' | false | value
            
Pager item active border
        
        

            
@_pager-background-active
            
@pager__active__background
            
false
            
'' | false | value
            
Pager item active background
        
        

            
@_pager-gradient-color-start-active
            
@pager__active__gradient-color-start
            
false
            
'' | false | value
            
Pager item active  gradient start color
        
        

            
@_pager-gradient-color-end-active
            
@pager__active__gradient-color-end
            
false
            
'' | false | value
            
Pager item active  gradient end color
        
        

            
Previous/next action links - icons
        
        

            
@_pager-icon-use
            
@pager-icon__use
            
true
            
true | false
            
previous/next links have icons
        
        

            
@_pager-icon-previous-content
            
@pager-icon__previous-content
            
@icon-prev
            
'' | false | value
            
"previous" link icon
        
        

            
@_pager-icon-next-content
            
@pager-icon__next-content
            
@icon-next
            
'' | false | value
            
"next" link icon
        
        

            
@_pager-icon-font-text-hide
            
@pager-icon__text-hide
            
true
            
true | false
            
The "previous" and "next" words are hidden
        
        

            
@_pager-icon-font-position
            
@pager-icon__position
            
before
            
before | after
            
Icon position
        
        

            
@_pager-icon-font
            
@pager-icon__font
            
@icon-font
            
'' | false | value
            
Icon font
        
        

            
@_pager-icon-font-margin
            
@pager-icon__font-margin
            
0 0 0 -6px
            
'' | false | value
            
Icon font margin
        
        

            
@_pager-icon-font-vertical-align
            
@pager-icon__font-vertical-align
            
top
            
'' | false | value
            
Icon font vertical align
        
        

            
@_pager-icon-font-size
            
@pager-icon__font-size
            
46px
            
'' | false | value
            
Icon font size
        
        

            
@_pager-icon-font-line-height
            
@pager-icon__font-line-height
            
@icon-font__line-height
            
'' | false | value
            
Icon font line height
        
        

            
Previous/next action links
        
        

            
@_pager-action-gradient
            
@pager__gradient
            
false
            
true | false
            
Previous/next links have gradient background
        
        

            
@_pager-action-gradient-direction
            
@pager__gradient-direction
            
false
            
'' | false | vertical | horizontal
            
Direction of background gradient (if there is any) of previous/next links
        
        

            
Previous/next action links - default
        
        

            
@_pager-action-color
            
@pager-action__color
            
@text__color__muted
            
'' | false | value
            
Pager action color
        
        

            
@_pager-action-border
            
@pager-action__border
            
@border-width__base solid @border-color__base
            
'' | false | value
            
Pager action border
        
        

            
@_pager-action-text-decoration
            
@pager-action__text-decoration
            
@pager__text-decoration
            
'' | false | value
            
Pager action text decoration
        
        

            
@_pager-action-background
            
@pager-action__background
            
@pager__background
            
'' | false | value
            
Pager action background
        
        

            
@_pager-action-gradient-color-start
            
@pager__gradient-color-start
            
false
            
'' | false | value
            
Pager action gradient start color
        
        

            
@_pager-action-gradient-color-end
            
@pager__gradient-color-end
            
false
            
'' | false | value
            
Pager action gradient end color
        
        

            
Previous/next action links - visited
        
        

            
@_pager-action-color-visited
            
@pager-action__visited__color
            
@pager-action__color
            
'' | false | value
            
Pager action visited color
        
        

            
@_pager-action-border-visited
            
@pager-action__visited__border
            
false
            
'' | false | value
            
Pager action visited border
        
        

            
@_pager-action-background-visited
            
@pager-action__visited__background
            
false
            
'' | false | value
            
Pager action visited background
        
        

            
@_pager-action-gradient-color-start-visited
            
@pager__visited__gradient-color-start
            
false
            
'' | false | value
            
Pager action visited gradient start color
        
        

            
@_pager-action-gradient-color-end-visited
            
@pager__visited__gradient-color-end
            
false
            
'' | false | value
            
Pager action visited gradient end color
        
        

            
Previous/next action links - hover
        
        

            
@_pager-action-color-hover
            
@pager-action__hover__color
            
@pager-action__color
            
'' | false | value
            
Pager action hover color
        
        

            
@_pager-action-border-hover
            
@pager-action__hover__border
            
false
            
'' | false | value
            
Pager action hover border
        
        

            
@_pager-action-text-decoration-hover
            
@pager-action__hover__text-decoration
            
@pager__hover__text-decoration
            
'' | false | value
            
Pager action hover text decoration
        
        

            
@_pager-action-background-hover
            
@pager-action__hover__background
            
false
            
'' | false | value
            
Pager action hover background
        
        

            
@_pager-action-gradient-color-start-hover
            
@pager__hover__gradient-color-start
            
false
            
'' | false | value
            
Pager action hover gradient start color
        
        

            
@_pager-action-gradient-color-end-hover
            
@pager__hover__gradient-color-end
            
false
            
'' | false | value
            
Pager action hover gradient end color
        
        

            
Previous/next action links - active
        
        

            
@_pager-action-color-active
            
@pager-action__active__color
            
@pager-action__color
            
'' | false | value
            
Pager action active color
        
        

            
@_pager-action-border-active
            
@pager-action__active__border
            
false
            
'' | false | value
            
Pager action active border
        
        

            
@_pager-action-background-active
            
@pager-action__active__background
            
false
            
'' | false | value
            
Pager action active background
        
        

            
@_pager-action-gradient-color-start-active
            
@pager__active__gradient-color-start
            
false
            
'' | false | value
            
Pager action active gradient start color
        
        

            
@_pager-action-gradient-color-end-active
            
@pager__active__gradient-color-end
            
false
            
'' | false | value
            
Pager action active gradient end color
        
      
  

Pagination with label and gradient background on links

To display label set:

  @_pager-label-display: inline-block

To set up gradient background on pages numbers use:

  @_pager-gradient: true

To set gradient start and end colors for default and hovered link states use:

  @_pager-gradient-color-start: #f4f4f4
  @_pager-gradient-color-end: #ccc
  @_pager-gradient-color-start-hover: #ccc
  @_pager-gradient-color-end-hover: #f4f4f4

To set an icon on "previous" and "next" links use:

  @_pager-icon-use: true
  @_pager-icon-previous-content: @icon-prev
  @_pager-icon-next-content: @icon-next

<div class="example-pages-1"> <strong class="label" id="paging-label">Page</strong> <ul class="items" aria-labelledby="paging-label"> <li class="item"> <a href="1" class="action previous"> <span class="label">Page</span> <span>Previous</span> </a> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>1</span> </a> </li> <li class="item current"> <strong class="page"> <span class="label">You're currently reading page</span> <span>2</span> </strong> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>3</span> </a> </li> <li class="item"> <a href="1" class="action next"> <span class="label">Page</span> <span>Next</span> </a> </li> </ul> </div>

.example-pages-1 {
    .lib-pager(
        @_pager-font-size: 12px,
        @_pager-label-display: inline-block,
        @_pager-item-margin: 0 3px,
        @_pager-gradient: true,
        @_pager-gradient-direction: vertical,
        @_pager-color: #333,
        @_pager-gradient-color-start: #f4f4f4,
        @_pager-gradient-color-end: #ccc,
        @_pager-border: 1px solid darken(#ccc, 10%),
        @_pager-color-hover: #333,
        @_pager-gradient-color-start-hover: #ccc,
        @_pager-gradient-color-end-hover: #f4f4f4,
        @_pager-border-hover: 1px solid darken(#ccc, 20%),
        @_pager-action-gradient: false,
        @_pager-current-color: #f7b32e,
        @_pager-current-border: 1px solid darken(#1979c3, 10%),
        @_pager-current-background: #1979c3,
        @_pager-icon-use: true,
        @_pager-icon-previous-content: @icon-prev,
        @_pager-icon-next-content: @icon-next,
        @_pager-icon-font-size: 30px,
        @_pager-action-color-hover: #ff5501
    );
}

Pagination with "previous"..."next" text links and label

Text view of pagination without borders, backgrounds and icons

Disable icon use for "previous" and "next" links

  @_pager-icon-use: false

Display pager label

  @_pager-label-display: inline-block

<div class="example-pages-2"> <strong class="label" id="paging-label">Page</strong> <ul class="items" aria-labelledby="paging-label"> <li class="item"> <a href="1" class="action previous"> <span class="label">Page</span> <span>Previous</span> </a> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>1</span> </a> </li> <li class="item current"> <strong class="page"> <span class="label">You're currently reading page</span> <span>2</span> </strong> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>3</span> </a> </li> <li class="item"> <a href="1" class="action next"> <span class="label">Page</span> <span>Next</span> </a> </li> </ul> </div>

.example-pages-2 {
    .lib-pager(
        @_pager-label-display: inline-block,
        @_pager-icon-use: false
    );
}

Pagination without label, with solid background

Pagination without label, with solid background and icons on previous/next links

Hide pager label:

  @_pager-label-display: none

To set background and font colors for default, visited, hover, active states, use:

  @_pager-color: #fff,
  @_pager-background: @link__color,
  @_pager-color-visited: #fff,
  @_pager-background-visited: @link__visited__color,
  @_pager-color-hover: #fff,
  @_pager-background-hover: @link__hover__color,
  @_pager-color-active: #fff,
  @_pager-background-active: @link__active__color,
  @_pager-current-color: #fff,
  @_pager-current-background: @link__visited__color,
  @_pager-action-background: @link__color,
  @_pager-icon-font-color: #fff,
  @_pager-action-background-visited: @link__visited__color

To set current page background and font color, use:

  @_pager-current-color: #fff,
  @_pager-current-background: @link__visited__color

To set background and icon color for default, visited, hover, active states of "previous" and "next" links, use:

  @_pager-action-background: @link__color,
  @_pager-action-background-visited: @link__visited__color,
  @_pager-action-background-hover: @link__hover__color,
  @_pager-action-background-active: @link__active__color,

  @_pager-icon-font-color: #fff,
  @_pager-icon-font-color-visited: #fff,
  @_pager-icon-font-color-hover: #fff,
  @_pager-icon-font-color-active: #fff

<div class="example-pages-3"> <strong class="label" id="paging-label">Page</strong> <ul class="items" aria-labelledby="paging-label"> <li class="item"> <a href="1" class="action previous"> <span class="label">Page</span> <span>Previous</span> </a> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>1</span> </a> </li> <li class="item current"> <strong class="page"> <span class="label">You're currently reading page</span> <span>2</span> </strong> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>3</span> </a> </li> <li class="item"> <a href="1" class="action next"> <span class="label">Page</span> <span>Next</span> </a> </li> </ul> </div>

.example-pages-3 {
    .lib-pager(
        @_pager-label-display: none,
        @_pager-color: #fff,
        @_pager-background: @link__color,
        @_pager-color-visited: #fff,
        @_pager-background-visited: @link__visited__color,
        @_pager-color-hover: #fff,
        @_pager-background-hover: @link__hover__color,
        @_pager-color-active: #fff,
        @_pager-background-active: @link__active__color,
        @_pager-current-color: #fff,
        @_pager-current-background: @link__visited__color,
        @_pager-action-background: @link__color,
        @_pager-action-background-visited: @link__visited__color,
        @_pager-action-background-hover: @link__hover__color,
        @_pager-action-background-active: @link__active__color,
        @_pager-action-color: #fff,
        @_pager-action-color-hover: #fff,
        @_pager-action-color-active: #fff
    );
}