{"componentChunkName":"component---src-pages-components-pagination-style-mdx","path":"/components/pagination/style/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Pagination","description":"Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/pagination/style.mdx","titleType":"prepend","MdxNode":{"id":"6b8288c0-b707-5c6e-b93f-c3212aec4329","children":[],"parent":"79dd8bc0-55e0-5ffe-93e1-43284e3b210c","internal":{"content":"---\ntitle: Pagination\ndescription: Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                          | Property         | Color token |\n| ------------------------------ | ---------------- | ----------- |\n| `.bx--pagination`              | background-color | `$ui-01`    |\n| `.bx--pagination`              | border-top       | `$ui-03`    |\n| `.bx--pagination__text`        | text color       | `$text-02`  |\n| `.bx--pagination__button-icon` | fill             | `$icon-01`  |\n\n## Typography\n\nPagination text should be set in set in sentence case with the first letter of each word capitalized.\n\n| Class                   | Font-size (px/rem) | Font-weight   | Type token    |\n| ----------------------- | ------------------ | ------------- | ------------- |\n| `.bx--pagination__text` | 12 / 0.75          | Regular / 400 | `$caption-01` |\n\n## Structure\n\nThe Pagination bar is most commonly used in data tables. The width can vary depending on content and layout, but should span the entire width of the table it's being paired with.\n\n| Class                               | Property                    | px / rem  | Spacing token |\n| ----------------------------------- | --------------------------- | --------- | ------------- |\n| `.bx--pagination`                   | height                      | 48 / 3    | –             |\n| `.bx--pagination`                   | border                      | 1px       | –             |\n| `.bx--pagination`                   | padding-left, padding-right | 16 / 1    | `$spacing-05` |\n| `.bx--pagination .bx--select-input` | padding-left, padding-right | 16 / 1    | `$spacing-05` |\n| `.bx--pagination__button`           | height, width               | 16 / 1    | –             |\n| `arrow`                             | icon size                   | 20 x 20px | –             |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing for pagination](images/pagination-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for Pagination | px / rem</Caption>\n","type":"Mdx","contentDigest":"867ccac338b0b63ee5a24e9a5641b4b1","counter":1364,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Pagination","description":"Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Pagination\ndescription: Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                          | Property         | Color token |\n| ------------------------------ | ---------------- | ----------- |\n| `.bx--pagination`              | background-color | `$ui-01`    |\n| `.bx--pagination`              | border-top       | `$ui-03`    |\n| `.bx--pagination__text`        | text color       | `$text-02`  |\n| `.bx--pagination__button-icon` | fill             | `$icon-01`  |\n\n## Typography\n\nPagination text should be set in set in sentence case with the first letter of each word capitalized.\n\n| Class                   | Font-size (px/rem) | Font-weight   | Type token    |\n| ----------------------- | ------------------ | ------------- | ------------- |\n| `.bx--pagination__text` | 12 / 0.75          | Regular / 400 | `$caption-01` |\n\n## Structure\n\nThe Pagination bar is most commonly used in data tables. The width can vary depending on content and layout, but should span the entire width of the table it's being paired with.\n\n| Class                               | Property                    | px / rem  | Spacing token |\n| ----------------------------------- | --------------------------- | --------- | ------------- |\n| `.bx--pagination`                   | height                      | 48 / 3    | –             |\n| `.bx--pagination`                   | border                      | 1px       | –             |\n| `.bx--pagination`                   | padding-left, padding-right | 16 / 1    | `$spacing-05` |\n| `.bx--pagination .bx--select-input` | padding-left, padding-right | 16 / 1    | `$spacing-05` |\n| `.bx--pagination__button`           | height, width               | 16 / 1    | –             |\n| `arrow`                             | icon size                   | 20 x 20px | –             |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing for pagination](images/pagination-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for Pagination | px / rem</Caption>\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/components/pagination/style.mdx"}}}}