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

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