# 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
        );
    }