diff --git a/app/components/pagination/numbered.njk b/app/components/pagination/numbered.njk
new file mode 100644
index 000000000..3c8d82fb2
--- /dev/null
+++ b/app/components/pagination/numbered.njk
@@ -0,0 +1,395 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Pagination' %}
+{% from 'components/pagination/macro.njk' import pagination %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+
+          <h2 class="nhsuk-heading-m">3 pages</h2>
+
+          {{ pagination({
+            nextUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#",
+                current: true
+              },
+              {
+                number: 2,
+                href: "#"
+              },
+              {
+                number: 3,
+                href: "#"
+              }
+            ]
+          }) }}
+
+          {{ pagination({
+            previousUrl: "#",
+            nextUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#"
+              },
+              {
+                number: 2,
+                current: true,
+                href: "#"
+              },
+              {
+                number: 3,
+                href: "#"
+              }
+            ]
+          }) }}
+
+
+          {{ pagination({
+            previousUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#"
+              },
+              {
+                number: 2,
+                href: "#"
+              },
+              {
+                number: 3,
+                href: "#",
+                current: true
+              }
+            ]
+          }) }}
+
+          <h2 class="nhsuk-heading-m">10 pages</h2>
+
+          {{ pagination({
+            nextUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#",
+                current: true
+              },
+              {
+                number: 2,
+                href: "#"
+              },
+              {
+                number: 3,
+                href: "#"
+              },
+              {
+                number: 4,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 10,
+                href: "#"
+              }
+            ]
+          }) }}
+
+          {{ pagination({
+            nextUrl: "#",
+            previousUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#"
+              },
+              {
+                number: 2,
+                href: "#",
+                current: true
+              },
+              {
+                number: 3,
+                href: "#"
+              },
+              {
+                number: 4,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 10,
+                href: "#"
+              }
+            ]
+          }) }}
+
+           {{ pagination({
+            nextUrl: "#",
+            previousUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#"
+              },
+              {
+                number: 2,
+                href: "#"
+              },
+              {
+                number: 3,
+                href: "#",
+                current: true
+              },
+              {
+                number: 4,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 10,
+                href: "#"
+              }
+            ]
+          }) }}
+
+          {{ pagination({
+            nextUrl: "#",
+            previousUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#"
+              },
+              {
+                number: 2,
+                href: "#"
+              },
+              {
+                number: 3,
+                href: "#"
+              },
+              {
+                number: 4,
+                href: "#",
+                current: true
+              },
+              {
+                number: 5,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 10,
+                href: "#"
+              }
+            ]
+          }) }}
+
+          {{ pagination({
+            nextUrl: "#",
+            previousUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 4,
+                href: "#"
+              },
+              {
+                number: 5,
+                href: "#",
+                current: true
+              },
+              {
+                number: 6,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 10,
+                href: "#"
+              }
+            ]
+          }) }}
+
+          {{ pagination({
+            nextUrl: "#",
+            previousUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 5,
+                href: "#"
+              },
+              {
+                number: 6,
+                href: "#",
+                current: true
+              },
+              {
+                number: 7,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 10,
+                href: "#"
+              }
+            ]
+          }) }}
+
+          {{ pagination({
+            nextUrl: "#",
+            previousUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 6,
+                href: "#"
+              },
+              {
+                number: 7,
+                href: "#",
+                current: true
+              },
+              {
+                number: 8,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 10,
+                href: "#"
+              }
+            ]
+          }) }}
+
+          {{ pagination({
+            nextUrl: "#",
+            previousUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 7,
+                href: "#"
+              },
+              {
+                number: 8,
+                href: "#",
+                current: true
+              },
+              {
+                number: 9,
+                href: "#"
+              },
+              {
+                number: 10,
+                href: "#"
+              }
+            ]
+          }) }}
+
+          {{ pagination({
+            nextUrl: "#",
+            previousUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 8,
+                href: "#"
+              },
+              {
+                number: 9,
+                href: "#",
+                current: true
+              },
+              {
+                number: 10,
+                href: "#"
+              }
+            ]
+          }) }}
+
+          {{ pagination({
+            previousUrl: "#",
+            items: [
+              {
+                number: 1,
+                href: "#"
+              },
+              {
+                ellipsis: true
+              },
+              {
+                number: 8,
+                href: "#"
+              },
+              {
+                number: 9,
+                href: "#"
+              },
+              {
+                number: 10,
+                href: "#",
+                current: true
+              }
+            ]
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/pagination/index.njk b/app/components/pagination/previous-and-next.njk
similarity index 100%
rename from app/components/pagination/index.njk
rename to app/components/pagination/previous-and-next.njk
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
index 857e28214..88d984df5 100644
--- a/app/pages/examples.njk
+++ b/app/pages/examples.njk
@@ -104,7 +104,8 @@
     <li><a href="../components/label/index.html">Label</a></li>
     <li><a href="../components/label/bold.html">Label with bold text</a></li>
     <li><a href="../components/label/page-heading.html">Label as page heading</a></li>
-    <li><a href="../components/pagination/index.html">Pagination</a></li>
+    <li><a href="../components/pagination/previous-and-next.html">Pagination: previous and next</a></li>
+    <li><a href="../components/pagination/numbered.html">Pagination: numbered pages</a></li>
     <li><a href="../components/radios/index.html">Radios</a></li>
     <li><a href="../components/radios/inline.html">Radios inline</a></li>
     <li><a href="../components/radios/disabled.html">Radios disabled</a></li>
@@ -131,7 +132,7 @@
     <li><a href="../components/warning-callout/index.html">Warning callout</a></li>
     <li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
   </ul>
-  
+
 {% endblock %}
 
 {% block footer %}
diff --git a/packages/components/pagination/_pagination.scss b/packages/components/pagination/_pagination.scss
index cf7b139f0..5c1677e90 100644
--- a/packages/components/pagination/_pagination.scss
+++ b/packages/components/pagination/_pagination.scss
@@ -9,6 +9,7 @@
  *    to understand in print context.
  */
 
+// Previous and next pages variant
 .nhsuk-pagination {
   @include nhsuk-responsive-margin(7, "top");
   @include nhsuk-responsive-margin(7, "bottom");
@@ -131,3 +132,109 @@
   display: block;
   text-decoration: underline;
 }
+
+// Numbered pages variant
+.nhsuk-pagination--numbered {
+  @include clearfix();
+}
+
+// In a numbered list, the previous link, numbered page links,
+// and next link should all line up
+.nhsuk-pagination--numbered__prev,
+.nhsuk-pagination--numbered__next,
+.nhsuk-pagination--numbered__item {
+  @include nhsuk-font(19);
+  box-sizing: border-box;
+  position: relative;
+  min-width: 45px;
+  min-height: 45px;
+  padding: nhsuk-spacing(2) nhsuk-spacing(2);
+  text-align: center;
+  margin: 0;
+  float: left;
+}
+
+.nhsuk-pagination--numbered__link:visited:hover,
+.nhsuk-pagination--numbered__item a:hover {
+  color: $nhsuk-link-hover-color;
+}
+
+.nhsuk-pagination--numbered__prev:hover,
+.nhsuk-pagination--numbered__next:hover,
+.nhsuk-pagination--numbered__item:hover {
+  background-color: $color_nhsuk-grey-4;
+  color: $color_nhsuk-blue;
+}
+
+// Container for the list of numbered items
+.nhsuk-pagination__list--numbered {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+// Current number
+.nhsuk-pagination--numbered__item--current,
+.nhsuk-pagination--numbered__item--current:hover {
+  background-color: $color_nhsuk-blue;
+  font-weight: $nhsuk-font-bold;
+
+  .nhsuk-pagination--numbered__link {
+    color: $color_nhsuk-white;
+  }
+
+  .nhsuk-pagination--numbered__link:focus {
+    color: $color_nhsuk-black;
+  }
+}
+
+.nhsuk-pagination--numbered__item--ellipses {
+  font-weight: $nhsuk-font-bold;
+  color: $nhsuk-secondary-text-color;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+.nhsuk-pagination--numbered__link {
+  min-width: nhsuk-spacing(3);
+  vertical-align: middle;
+  color: $color_nhsuk-blue;
+
+  // Increase the touch area for the link to the parent element.
+  @media screen {
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+}
+
+.nhsuk-pagination--numbered .nhsuk-icon {
+  margin-top: 0;
+  margin-bottom: -12px;
+  fill: $color_nhsuk-blue;
+}
+
+.nhsuk-pagination--numbered__link:visited .nhsuk-icon {
+  fill: $nhsuk-link-visited-color;
+}
+
+.nhsuk-pagination--numbered__link:hover .nhsuk-icon {
+  fill: $nhsuk-link-hover-color;
+}
+
+.nhsuk-pagination--numbered .nhsuk-icon__arrow-left {
+  margin-left: -13px;
+  margin-right: nhsuk-spacing(2);
+}
+
+.nhsuk-pagination--numbered .nhsuk-icon__arrow-right {
+  margin-left: nhsuk-spacing(2);
+  margin-right: -13px;
+}
diff --git a/packages/components/pagination/template.njk b/packages/components/pagination/template.njk
index 3712fe5ba..b68569915 100644
--- a/packages/components/pagination/template.njk
+++ b/packages/components/pagination/template.njk
@@ -1,32 +1,107 @@
 {% from "../../macros/attributes.njk" import nhsukAttributes %}
 
-<nav class="nhsuk-pagination
+{# There are 2 variants of this component, one for content pages which
+has only previous and next links including the titles of those pages,
+and one for navigating between pages of items, like search results.
+
+The numbered variable sets which variant is being used, based on the
+presence of items (pages). #}
+{% set numbered = true if params.items %}
+
+{# Arrow pointing left - used by both variants #}
+{%- macro _arrowPrevious() -%}
+  <svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
+    <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path>
+  </svg>
+{%- endmacro -%}
+
+{# Arrow pointing right - used by both variants #}
+{%- macro _arrowNext() -%}
+  <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
+    <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
+  </svg>
+{%- endmacro -%}
+
+{# Numbered page - included as a link within a list item. #}
+{%- macro _pageItem(item) -%}
+  <li class="nhsuk-pagination--numbered__item {%- if item.current %} nhsuk-pagination--numbered__item--current{% endif %} {%- if item.ellipsis %} nhsuk-pagination--numbered__item--ellipses{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
+  {% if item.ellipsis %}
+    &ctdot;
+  {% else %}
+    <a class="nhsuk-pagination--numbered__link" href="{{ item.href }}" aria-label="{{ item.visuallyHiddenText | default("Page " + item.number) }}"
+      {%- if item.current %} aria-current="page"{% endif %}
+      {{- nhsukAttributes(item.attributes) }}>
+      {{ item.number }}
+    </a>
+  {% endif %}
+  </li>
+{%- endmacro -%}
+
+{# Link for the previous or next or next page, displayed at either end of
+the numbered variant only, and including an arrow pointing left or right. #}
+{%- macro _arrowLink(link, type = "next") %}
+  {% set arrowType = arrowPrevious if type == "prev" else arrowNext %}
+  <div class="nhsuk-pagination--numbered__{{ type }}">
+    <a class="nhsuk-pagination--numbered__link" href="{{ link }}" rel="{{ type }}">
+      {%- if type == "prev" -%}
+        {{ _arrowPrevious() }}
+      {%- endif -%}
+      {{ caller() | safe }}
+      {%- if type == "next" -%}
+        {{ _arrowNext() }}
+      {%- endif -%}
+    </a>
+  </div>
+{% endmacro -%}
+
+<nav class="nhsuk-pagination {{ "nhsuk-pagination--numbered" if numbered }}
 {%- if params.classes %} {{ params.classes }}{% endif %}" role="navigation" aria-label="Pagination"
 {{- nhsukAttributes(params.attributes) }}>
-  <ul class="nhsuk-list nhsuk-pagination__list">
-  {%- if params.previousUrl and params.previousPage %}
-    <li class="nhsuk-pagination-item--previous">
-      <a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="{{ params.previousUrl }}">
-        <span class="nhsuk-pagination__title">Previous</span>
-        <span class="nhsuk-u-visually-hidden">:</span>
-        <span class="nhsuk-pagination__page">{{ params.previousPage }}</span>
-        <svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-          <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path>
-        </svg>
-      </a>
-    </li>
-  {%- endif %}
-  {%- if params.nextUrl and params.nextPage %}
-    <li class="nhsuk-pagination-item--next">
-      <a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="{{ params.nextUrl }}">
-        <span class="nhsuk-pagination__title">Next</span>
-        <span class="nhsuk-u-visually-hidden">:</span>
-        <span class="nhsuk-pagination__page">{{ params.nextPage }}</span>
-        <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-          <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
-        </svg>
-      </a>
-    </li>
+
+  {%- if numbered %}
+
+    {% if params.previousUrl %}
+      {% call _arrowLink(params.previousUrl, "prev") -%}
+        Previous<span class="nhsuk-u-visually-hidden"> page</span>
+      {% endcall %}
+    {% endif %}
+
+    <ul class="nhsuk-pagination__list--numbered">
+    {% for item in params.items %}
+      {{ _pageItem(item) | indent(2) }}
+    {% endfor %}
+    </ul>
+
+    {% if params.nextUrl %}
+      {% call _arrowLink(params.nextUrl, "next") -%}
+        Next<span class="nhsuk-u-visually-hidden"> page</span>
+      {%- endcall %}
+    {% endif %}
+
+  {%- else %}
+
+    <ul class="nhsuk-list nhsuk-pagination__list">
+      {%- if params.previousUrl and params.previousPage %}
+        <li class="nhsuk-pagination-item--previous">
+          <a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="{{ params.previousUrl }}">
+            <span class="nhsuk-pagination__title">Previous</span>
+            <span class="nhsuk-u-visually-hidden">:</span>
+            <span class="nhsuk-pagination__page">{{ params.previousPage }}</span>
+            {{ _arrowPrevious() }}
+          </a>
+        </li>
+      {%- endif %}
+      {%- if params.nextUrl and params.nextPage %}
+        <li class="nhsuk-pagination-item--next">
+          <a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="{{ params.nextUrl }}">
+            <span class="nhsuk-pagination__title">Next</span>
+            <span class="nhsuk-u-visually-hidden">:</span>
+            <span class="nhsuk-pagination__page">{{ params.nextPage }}</span>
+            {{ _arrowNext() }}
+          </a>
+        </li>
+
+      {%- endif %}
+    </ul>
   {%- endif %}
-  </ul>
 </nav>