Components

Pagination

Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.

Neon's pagination provides our users the ability to view a select amount of items per page, while also giving them the ability to scroll through and view each page. Pagination helps to control the amount of items viewed, allowing for greater flexibility for our user to view their data sets as they please.

Created with Sketch. 2 2 of 4 pages 1 - 10 of 40 items 10 Items per page:
Created with Sketch. 2 2 of 4 pages 1 - 10 of 40 items 10 Items per page:    16px 16px 16px 16px 16px 16px  4px 16px 16px 16px 16px
Created with Sketch. 2 2 of 4 pages 1 - 10 of 40 items 10 Items per page:     40px 40px 14px 20px 14px

Base Code 

.item_text {
font-family: Lato-Bold;
font-size: 12px;
color: #54698D;
letter-spacing: 0;
}

item_value {
font-family: Lato-Regular;
font-size: 14px;
color: #0074D9;
}

.divder_line {
border: 1px solid #DFE3E6;
}

.left_caret {
font-family: "Font Awesome 5 Free";
content: fa-angle-left;
background: #0074D9;
}

.dropdown_arrow {
font-family: "Font Awesome 5 Free";
content: fa-caret-down;
background: #0074D9;
}

.right_caret {
font-family: "Font Awesome 5 Free";
content: fa-angle-right;
background: #0074D9;
}

Important to Note

Pagination dropdowns can be rendered using the default dropdown per each web browserUse the browser default dropdown's for each dropdown menu as illustrated.

Overview of CSS Classes

Selector
Summary
Parent Selector

.item-text

.items-per-page

.item-value

.divider-line

.left-caret

.dropdown-arrow

.right-caret

summary needed

summary needed

summary needed

summary needed

summary needed

summary needed

summary needed