Notifications

close
  • Generic placeholder image
    Amy Adams1Jan 22

    Hey!! What are you doing tonight ?

  • Generic placeholder image
    James Simpsons2Feb 15

    What's up ???

  • Generic placeholder image
    Mark Witherspoon3Mar 03

    I will be late today in office.

  • Generic placeholder image
    Jenniffer Wills4Apr 05

    Venture presentation is ready.

  • N
    Nelson SmithJan 22

    WORKSalary has been processed.

  • C
    Courtney CoxFeb 15

    URGENTNew product launching...

  • R
    Rachel WhiteMar 03

    ORDERSHOPPINGYour order has been...

  • F
    FreepikMar 03

    VERIFY NOWNew Sign verification req...

  • Payment Success !!!

    We have received your payment toward ad Account : 9876543210. Your Ad is Running.

    INFOSTATUSToday, 09:39 PM

  • Nobita Applied for Leave.

    Nobita applied for leave due to personal reasons on 22nd Feb.

    APPROVEREJECTYesterday, 05:25 PM

  • Alert

    There has been new Log in fron your account at Melbourne. Mark it safe or report.

    Report Now5 Jan 2019, 02:13 PM

  • Congratulations !!!

    Your role in the organization has been changed from Editor to Chief Strategist.

    ACTIVITY10 Jan 2019, 08:49 PM

Settings

close
Select Color
Night Mode
Navigation Sidebar
Select Account
profile
Shourya Kumar

Social Media Strategist

  • user
  • email
  • logout

Paginations

  1. Home
  2. Basic UI Kits
  3. Paginations
Default
Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.
Working With Icons
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes and the .sr-only utility.
Disabled And Active States with Link
While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add tabindex="-1" on disabled links and use custom JavaScript to fully disable their functionality.
Disabled And Active States with Span
You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.
Larger Sizing
Fancy larger pagination? Add .pagination-lg for additional sizes.
Small Sizing
Fancy smaller pagination? Add .pagination-sm for additional sizes.
Center Alignment
Fancy larger pagination? Add .pagination-lg for additional sizes.
Right Alignment
Fancy smaller pagination? Add .pagination-sm for additional sizes.

© 2019 Theta - All Rights Reserved.