diff --git a/content/components/pagination/accessibility/a11y-colorblind/index.yml b/content/components/pagination/accessibility/a11y-colorblind/index.yml
new file mode 100644
index 000000000..350b460a0
--- /dev/null
+++ b/content/components/pagination/accessibility/a11y-colorblind/index.yml
@@ -0,0 +1,5 @@
+layout: example/page
+examples:
+  - template: ../example-code.md
+filter: deuteranopia
+alignment: inline
diff --git a/content/components/pagination/accessibility/a11y-grayscale/index.yml b/content/components/pagination/accessibility/a11y-grayscale/index.yml
new file mode 100644
index 000000000..3219eb90a
--- /dev/null
+++ b/content/components/pagination/accessibility/a11y-grayscale/index.yml
@@ -0,0 +1,5 @@
+layout: example/page
+examples:
+  - template: ../example-code.md
+filter: grayscale
+alignment: inline
diff --git a/content/components/pagination/accessibility/a11y-keyboard/index.yml b/content/components/pagination/accessibility/a11y-keyboard/index.yml
new file mode 100644
index 000000000..ec5fcefd7
--- /dev/null
+++ b/content/components/pagination/accessibility/a11y-keyboard/index.yml
@@ -0,0 +1,5 @@
+layout: example/page
+examples:
+  - template: ../example-code.md
+tabbing: true
+alignment: inline
diff --git a/content/components/pagination/accessibility/colorblind.md b/content/components/pagination/accessibility/colorblind.md
new file mode 100644
index 000000000..1d6faf1df
--- /dev/null
+++ b/content/components/pagination/accessibility/colorblind.md
@@ -0,0 +1,8 @@
+---
+layout: component/code-demo
+iframe: a11y-colorblind
+iframeFullwidth: true
+---
+## Colour impairment
+
+How the pagination is viewed with various colour blindnesses
diff --git a/content/components/pagination/accessibility/example-code.md b/content/components/pagination/accessibility/example-code.md
new file mode 100644
index 000000000..ecaec4188
--- /dev/null
+++ b/content/components/pagination/accessibility/example-code.md
@@ -0,0 +1,35 @@
+<div>
+    <nav role="navigation" aria-label="Pagination Navigation" class="au-pagination ">
+            <ul class=" au-link-list au-link-list--inline">
+              <li class="au-pagination-control disabled ">
+                <a href="#" class="au-pagination-link au-pagination-controls-link disabled js-focus-me " aria-label="Go to previous page" text="Previous" aria-disabled="true">Previous
+                </a>
+              </li>
+              <li class="au-pagination-item active">
+                <a href="#" class="au-pagination-link active js-focus-me" id="1" aria-label="Page 1" aria-current="true">1
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link js-focus-me" id="2" aria-label="Page 2" aria-current="false">2
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link js-focus-me" id="3" aria-label="Page 3" aria-current="false">3
+                </a>
+              </li>
+              <li class="au-pagination-item">
+              <a class="au-pagination-link js-focus-me" href="#" aria-label="">
+              <span class="au-pagination-link--quick-jumper " aria-hidden="true">...</span>
+              </a>
+              </li>
+              <li class="au-pagination-item ">
+              <a href="#" class="au-pagination-link js-focus-me" id="10" aria-label="Page 10" aria-current="false">10
+              </a>
+              </li>
+              <li class="au-pagination-control">
+              <a href="#" class="au-pagination-link au-pagination-controls-link js-focus-me" aria-label="Go to next page" text="Next">Next
+              </a>
+              </li>
+            </ul>
+          </nav>
+      </div>
diff --git a/content/components/pagination/accessibility/grayscale.md b/content/components/pagination/accessibility/grayscale.md
new file mode 100644
index 000000000..b566e4def
--- /dev/null
+++ b/content/components/pagination/accessibility/grayscale.md
@@ -0,0 +1,8 @@
+---
+layout: component/code-demo
+iframe: a11y-grayscale
+iframeFullwidth: true
+---
+## Grayscale
+
+How the pagination is viewed with total colour blindness.
diff --git a/content/components/pagination/accessibility/index.yml b/content/components/pagination/accessibility/index.yml
new file mode 100644
index 000000000..359949c2f
--- /dev/null
+++ b/content/components/pagination/accessibility/index.yml
@@ -0,0 +1,21 @@
+layout: component/page
+pagetitle: Pagination accessibility
+
+header:
+  - /_shared/header.md
+
+component_nav:
+  - /components/_tabs.md
+
+sidebar:
+  - /components/search.md
+  - /components/sidebar.md
+
+main:
+  - colorblind.md
+  - grayscale.md
+  - keyboard.md
+  - screenreader.md
+
+footer:
+  - /_shared/footer.md
diff --git a/content/components/pagination/accessibility/keyboard.md b/content/components/pagination/accessibility/keyboard.md
new file mode 100644
index 000000000..2df71b89b
--- /dev/null
+++ b/content/components/pagination/accessibility/keyboard.md
@@ -0,0 +1,8 @@
+---
+layout: component/code-demo
+iframe: a11y-keyboard
+iframeFullwidth: true
+---
+## Keyboard accessibility
+
+How keyboard navigation works with page alerts.
diff --git a/content/components/pagination/accessibility/screenreader.md b/content/components/pagination/accessibility/screenreader.md
new file mode 100644
index 000000000..307c6bdd4
--- /dev/null
+++ b/content/components/pagination/accessibility/screenreader.md
@@ -0,0 +1,15 @@
+---
+layout: component/screenreader
+heading: Screen readers
+speak: |
+
+  [Heading level 3] Alert title.
+
+  Alert Content [link] link.
+
+---
+
+
+How the page alerts demo is described by assistive technology.
+
+As read with macOS High Sierra VoiceOver.
diff --git a/content/components/pagination/code/index.yml b/content/components/pagination/code/index.yml
new file mode 100644
index 000000000..9691f41bd
--- /dev/null
+++ b/content/components/pagination/code/index.yml
@@ -0,0 +1,20 @@
+layout: component/page
+pagetitle: TODO rationale
+
+header:
+  - /_shared/header.md
+
+component_nav:
+  - /components/_tabs.md
+
+sidebar:
+  - /components/search.md
+  - /components/sidebar.md
+
+main:
+  - react-usage.md
+  - react-props.md
+  - react-exports.md
+
+footer:
+  - /_shared/footer.md
diff --git a/content/components/pagination/code/react-exports.md b/content/components/pagination/code/react-exports.md
new file mode 100644
index 000000000..b37308002
--- /dev/null
+++ b/content/components/pagination/code/react-exports.md
@@ -0,0 +1,21 @@
+---
+layout: section
+---
+
+### Exports
+
+| Name       | Type    | Description
+|------------|---------|-----------------------------------------------------------------------------
+| `AUpagination` | default | The page alerts component
+
+### [md]node_modules import
+
+```jsx
+import AUpagination from '@gov.au/pagination';
+```
+
+### [md]pancake import
+
+```jsx
+import AUpagination from './pagination';
+```
diff --git a/content/components/pagination/code/react-props.md b/content/components/pagination/code/react-props.md
new file mode 100644
index 000000000..c89cc0575
--- /dev/null
+++ b/content/components/pagination/code/react-props.md
@@ -0,0 +1,15 @@
+---
+layout: section
+---
+
+### Props
+
+| Prop name      | Type    | Description
+|----------------|--------------------------------------------------------------------------------------- | --- |
+| left           | boolean | Align pagination to the left
+| right          | boolean | Align pagination to the right
+| center         | boolean | Align pagination to the center
+| totalResults   | number  | Total amount of items in Pagination list
+| recordsPerPage | number  | Number of results that display per page
+
+All other props are spread into the component
diff --git a/content/components/pagination/code/react-usage.md b/content/components/pagination/code/react-usage.md
new file mode 100644
index 000000000..77b0fcc41
--- /dev/null
+++ b/content/components/pagination/code/react-usage.md
@@ -0,0 +1,12 @@
+---
+layout: section
+---
+
+## React Usage
+
+```jsx
+import AUpagination from '@gov.au/pagination';
+
+<AUPagination totalResults={ 100 } recordsPerPage={ 10 } center onChange={ this.onChanged } />	
+
+```
diff --git a/content/components/pagination/default.md b/content/components/pagination/default.md
index 3e74f133e..c25ed114a 100644
--- a/content/components/pagination/default.md
+++ b/content/components/pagination/default.md
@@ -1,3 +1,55 @@
-We're currently discussing whether or not our community will benefit from a
-navigation component. Join the conversation in our
-[community forum](https://community.digital.gov.au/t/pagination/118).
+---
+layout: component/code-demo
+iframe: examples/example-default
+iframeFullwidth: true
+code:
+  - HTML: |
+      
+      <div>
+        <nav role="navigation" aria-label="Pagination Navigation" class="au-pagination ">
+            <ul class=" au-link-list au-link-list--inline">
+                <li class="au-pagination-control disabled ">
+                  <a href="#" class="au-pagination-link au-pagination-controls-link disabled " aria-label="Go to previous page" text="Previous" aria-disabled="true">Previous
+                  </a>
+                </li>
+                <li class="au-pagination-item active">
+                  <a href="#" class="au-pagination-link active" id="1" aria-label="Page 1" aria-current="true">1
+                  </a>
+                </li>
+                <li class="au-pagination-item ">
+                  <a href="#" class="au-pagination-link " id="2" aria-label="Page 2" aria-current="false">2
+                  </a>
+                </li>
+                <li class="au-pagination-item ">
+                  <a href="#" class="au-pagination-link " id="3" aria-label="Page 3" aria-current="false">3
+                  </a>
+                </li>
+                <li class="au-pagination-item">
+                <a class="au-pagination-link " href="#" aria-label="">
+                <span class="au-pagination-link--quick-jumper " aria-hidden="true">...</span>
+                </a>
+                </li>
+                <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link " id="10" aria-label="Page 10" aria-current="false">10
+                </a>
+                </li>
+                <li class="au-pagination-control">
+                <a href="#" class="au-pagination-link au-pagination-controls-link" aria-label="Go to next page" text="Next">Next
+                </a>
+                </li>
+            </ul>
+          </nav>
+      </div>
+            
+
+  - React: |
+     
+      import AUpagination from '@gov.au/pagination';
+
+      <AUPagination totalResults={ 100 } recordsPerPage={ 10 } center onChange={ this.onChanged } />	
+
+      
+---
+## Default
+
+Pagination allows users to navigate through multiple pages of content. The first and last pagaination items are always visible to the user. Users can either select an individual page from the pagination list, or use the `Previous` and `Next` keys to navigate through the pagination items sequentially . The ellipsis can also be used to display ether the next 5 pages or the previous 5 pages in the list. 
diff --git a/content/components/pagination/discussion/community-intro.md b/content/components/pagination/discussion/community-intro.md
new file mode 100644
index 000000000..7d7623cca
--- /dev/null
+++ b/content/components/pagination/discussion/community-intro.md
@@ -0,0 +1,8 @@
+---
+layout: component/discussion-callout
+btntext: Community
+btnurl: https://community.digital.gov.au/t/
+btntype: secondary
+---
+
+Our components are a collaborative effort, we welcome constructive conversation and contribution.
diff --git a/content/components/pagination/discussion/github-intro.md b/content/components/pagination/discussion/github-intro.md
new file mode 100644
index 000000000..3237112aa
--- /dev/null
+++ b/content/components/pagination/discussion/github-intro.md
@@ -0,0 +1,8 @@
+---
+layout: component/discussion-callout
+btntext: GitHub
+btnurl: https://github.com/govau/design-system-components/tree/master/packages/
+btntype: secondary
+---
+
+ Found an issue? Interested in contributing code? We'd love your feedback over at our GitHub repository.
diff --git a/content/components/pagination/discussion/index.yml b/content/components/pagination/discussion/index.yml
new file mode 100644
index 000000000..c6693286d
--- /dev/null
+++ b/content/components/pagination/discussion/index.yml
@@ -0,0 +1,19 @@
+layout: component/page
+pagetitle: TODO discussion
+
+header:
+  - /_shared/header.md
+
+component_nav:
+  - /components/_tabs.md
+
+sidebar:
+  - /components/search.md
+  - /components/sidebar.md
+
+main:
+  - community-intro.md
+  - github-intro.md
+
+footer:
+  - /_shared/footer.md
diff --git a/content/components/pagination/examples/example-default/example-code.md b/content/components/pagination/examples/example-default/example-code.md
new file mode 100644
index 000000000..42ec82dfd
--- /dev/null
+++ b/content/components/pagination/examples/example-default/example-code.md
@@ -0,0 +1,35 @@
+  <div>
+    <nav role="navigation" aria-label="Pagination Navigation" class="au-pagination ">
+            <ul class=" au-link-list au-link-list--inline">
+              <li class="au-pagination-control disabled ">
+                <a href="#" class="au-pagination-link au-pagination-controls-link disabled " aria-label="Go to previous page" text="Previous" aria-disabled="true">Previous
+                </a>
+              </li>
+              <li class="au-pagination-item active">
+                <a href="#" class="au-pagination-link active" id="1" aria-label="Page 1" aria-current="true">1
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link " id="2" aria-label="Page 2" aria-current="false">2
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link " id="3" aria-label="Page 3" aria-current="false">3
+                </a>
+              </li>
+              <li class="au-pagination-item">
+              <a class="au-pagination-link " href="#" aria-label="">
+              <span class="au-pagination-link--quick-jumper " aria-hidden="true">...</span>
+              </a>
+              </li>
+              <li class="au-pagination-item ">
+              <a href="#" class="au-pagination-link " id="10" aria-label="Page 10" aria-current="false">10
+              </a>
+              </li>
+              <li class="au-pagination-control">
+              <a href="#" class="au-pagination-link au-pagination-controls-link" aria-label="Go to next page" text="Next">Next
+              </a>
+              </li>
+            </ul>
+          </nav>
+      </div>
diff --git a/content/components/pagination/examples/example-default/index.yml b/content/components/pagination/examples/example-default/index.yml
new file mode 100644
index 000000000..88fac894a
--- /dev/null
+++ b/content/components/pagination/examples/example-default/index.yml
@@ -0,0 +1,4 @@
+layout: example/page
+examples:
+  - template: example-code.md
+   
diff --git a/content/components/pagination/index.yml b/content/components/pagination/index.yml
index c53731638..72b235dcb 100644
--- a/content/components/pagination/index.yml
+++ b/content/components/pagination/index.yml
@@ -4,6 +4,9 @@ pagetitle: Pagination overview
 header:
   - /_shared/header.md
 
+component_nav:
+  - /components/_tabs.md
+
 sidebar:
   - /components/search.md
   - /components/sidebar.md
diff --git a/content/components/pagination/live/example-default/example-code.md b/content/components/pagination/live/example-default/example-code.md
new file mode 100644
index 000000000..0150704fc
--- /dev/null
+++ b/content/components/pagination/live/example-default/example-code.md
@@ -0,0 +1,35 @@
+  <div>
+     <nav role="navigation" aria-label="Pagination Navigation" class="au-pagination ">
+            <ul class=" au-link-list au-link-list--inline">
+              <li class="au-pagination-control disabled ">
+                <a href="#" class="au-pagination-link au-pagination-controls-link disabled " aria-label="Go to previous page" text="Previous" aria-disabled="true">Previous
+                </a>
+              </li>
+              <li class="au-pagination-item active">
+                <a href="#" class="au-pagination-link active" id="1" aria-label="Page 1" aria-current="true">1
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link " id="2" aria-label="Page 2" aria-current="false">2
+                </a>
+              </li>
+              <li class="au-pagination-item ">
+                <a href="#" class="au-pagination-link " id="3" aria-label="Page 3" aria-current="false">3
+                </a>
+              </li>
+              <li class="au-pagination-item">
+              <a class="au-pagination-link " href="#" aria-label="">
+              <span class="au-pagination-link--quick-jumper " aria-hidden="true">...</span>
+              </a>
+              </li>
+              <li class="au-pagination-item ">
+              <a href="#" class="au-pagination-link " id="10" aria-label="Page 10" aria-current="false">10
+              </a>
+              </li>
+              <li class="au-pagination-control">
+              <a href="#" class="au-pagination-link au-pagination-controls-link" aria-label="Go to next page" text="Next">Next
+              </a>
+              </li>
+            </ul>
+          </nav>
+      </div>
diff --git a/content/components/pagination/live/example-default/index.yml b/content/components/pagination/live/example-default/index.yml
new file mode 100644
index 000000000..ed158bb01
--- /dev/null
+++ b/content/components/pagination/live/example-default/index.yml
@@ -0,0 +1,5 @@
+layout: example/page
+examples:
+  - template: example-code.md
+  - template: example-dark.md
+    style: dark
diff --git a/content/components/pagination/live/index.yml b/content/components/pagination/live/index.yml
new file mode 100644
index 000000000..7df046eb0
--- /dev/null
+++ b/content/components/pagination/live/index.yml
@@ -0,0 +1,5 @@
+layout: example/page
+pagetitle: TODO live demo
+examples:
+  - template: ../accessibility/example-code.md
+livedemo: true
diff --git a/content/components/pagination/rationale/first-last-items.md b/content/components/pagination/rationale/first-last-items.md
new file mode 100644
index 000000000..b0d120861
--- /dev/null
+++ b/content/components/pagination/rationale/first-last-items.md
@@ -0,0 +1,8 @@
+---
+layout: component/rationale.js
+heading: First and last pagination items always visible
+---
+
+By design the first and last items in the pagination list will always be visible where applicable.
+
+Showing the last item in the pagination list enables the end user to know the limit of the pagination and how many pages of results are present. Showing both the first and last items upfront provides the user with a quick way to navigate to either of these options with needing to use the `Previous` and `Next` keys.
diff --git a/content/components/pagination/rationale/index.yml b/content/components/pagination/rationale/index.yml
new file mode 100644
index 000000000..e6af937ef
--- /dev/null
+++ b/content/components/pagination/rationale/index.yml
@@ -0,0 +1,18 @@
+layout: component/page
+pagetitle: TODO rationale
+
+header:
+  - /_shared/header.md
+
+component_nav:
+  - /components/_tabs.md
+
+sidebar:
+  - /components/search.md
+  - /components/sidebar.md
+
+main:
+  - first-last-items.md
+
+footer:
+  - /_shared/footer.md