diff --git a/guide/content/building-blocks/fieldsets.slim b/guide/content/building-blocks/fieldsets.slim
index aba7c7ea..1197f32d 100644
--- a/guide/content/building-blocks/fieldsets.slim
+++ b/guide/content/building-blocks/fieldsets.slim
@@ -18,4 +18,4 @@ p.govuk-body
for screen reader users, the screen reader will announce the legend
before reading the individual field labels.
-== render('/partials/related-info.*', links: fieldset_info)
+== render('/partials/related-navigation.*', links: fieldset_info)
diff --git a/guide/content/form-elements/checkboxes.slim b/guide/content/form-elements/checkboxes.slim
index f706fd28..04f656fe 100644
--- a/guide/content/form-elements/checkboxes.slim
+++ b/guide/content/form-elements/checkboxes.slim
@@ -98,4 +98,4 @@ p.govuk-body
| It usually makes sense to separate exclusive checkboxes from the others
with a divider.
-== render('/partials/related-info.*', links: checkbox_info)
+== render('/partials/related-navigation.*', links: checkbox_info)
diff --git a/guide/content/form-elements/date-input.slim b/guide/content/form-elements/date-input.slim
index eb550aa3..8f3e6071 100644
--- a/guide/content/form-elements/date-input.slim
+++ b/guide/content/form-elements/date-input.slim
@@ -65,4 +65,4 @@ ul.govuk-list.govuk-list--bullet
This will default the day and month inputs to 2 characters and the year
input to 4 characters.
-== render('/partials/related-info.*', links: date_info)
+== render('/partials/related-navigation.*', links: date_info)
diff --git a/guide/content/form-elements/file-upload.slim b/guide/content/form-elements/file-upload.slim
index 78666dcf..bb8962b6 100644
--- a/guide/content/form-elements/file-upload.slim
+++ b/guide/content/form-elements/file-upload.slim
@@ -14,4 +14,4 @@ p.govuk-body
caption: 'File upload with label and hint',
code: file_upload)
-== render('/partials/related-info.*', links: file_info)
+== render('/partials/related-navigation.*', links: file_info)
diff --git a/guide/content/form-elements/radios.slim b/guide/content/form-elements/radios.slim
index a2c71dfc..05454da4 100644
--- a/guide/content/form-elements/radios.slim
+++ b/guide/content/form-elements/radios.slim
@@ -104,4 +104,4 @@ p.govuk-body
argument, item
, which is object representing the radio
button.
-== render('/partials/related-info.*', links: radios_info)
+== render('/partials/related-navigation.*', links: radios_info)
diff --git a/guide/content/form-elements/select.slim b/guide/content/form-elements/select.slim
index 7bffec37..ee3fd5e4 100644
--- a/guide/content/form-elements/select.slim
+++ b/guide/content/form-elements/select.slim
@@ -42,4 +42,4 @@ p.govuk-body
li
| manually specifying the options using a block of HTML
-== render('/partials/related-info.*', links: select_info)
+== render('/partials/related-navigation.*', links: select_info)
diff --git a/guide/content/form-elements/submit.slim b/guide/content/form-elements/submit.slim
index faedfc81..9db56199 100644
--- a/guide/content/form-elements/submit.slim
+++ b/guide/content/form-elements/submit.slim
@@ -49,4 +49,4 @@ p.govuk-body
passed in as a block will be rendered in-line with the primary submit
button.
-== render('/partials/related-info.*', links: submit_info)
+== render('/partials/related-navigation.*', links: submit_info)
diff --git a/guide/content/form-elements/text-input.slim b/guide/content/form-elements/text-input.slim
index 417246b9..b2d45b9e 100644
--- a/guide/content/form-elements/text-input.slim
+++ b/guide/content/form-elements/text-input.slim
@@ -154,4 +154,4 @@ p.govuk-body
text in the field more readable by adding some extra spacing between
characters.
-== render('/partials/related-info.*', links: text_field_info)
+== render('/partials/related-navigation.*', links: text_field_info)
diff --git a/guide/content/form-elements/textarea.slim b/guide/content/form-elements/textarea.slim
index 55b0e65c..ad57b871 100644
--- a/guide/content/form-elements/textarea.slim
+++ b/guide/content/form-elements/textarea.slim
@@ -36,4 +36,4 @@ p.govuk-body
| To do this, set the threshold
parameter in conjunction with a
word or character limit.
-== render('/partials/related-info.*', links: text_area_info)
+== render('/partials/related-navigation.*', links: text_area_info)
diff --git a/guide/content/introduction/error-handling.slim b/guide/content/introduction/error-handling.slim
index a9cbb333..25469609 100644
--- a/guide/content/introduction/error-handling.slim
+++ b/guide/content/introduction/error-handling.slim
@@ -63,4 +63,4 @@ p.govuk-body
will be instantiated with the associated object’s
#errors.messages
.
-== render('/partials/related-info.*', links: error_handling_info)
+== render('/partials/related-navigation.*', links: error_handling_info)
diff --git a/guide/content/stylesheets/application.scss b/guide/content/stylesheets/application.scss
index cc0ba998..6623cbdf 100644
--- a/guide/content/stylesheets/application.scss
+++ b/guide/content/stylesheets/application.scss
@@ -13,6 +13,7 @@ $govuk-page-width: 1100px;
// Import GOV.UK Prototype Components
@import "x-govuk/components/masthead/masthead";
+@import "x-govuk/components/related-navigation/related-navigation";
@import "x-govuk/components/sub-navigation/sub-navigation";
// Application components
diff --git a/guide/layouts/partials/related-info.slim b/guide/layouts/partials/related-info.slim
deleted file mode 100644
index 12d60a10..00000000
--- a/guide/layouts/partials/related-info.slim
+++ /dev/null
@@ -1,5 +0,0 @@
-h2 class="govuk-heading-m govuk-!-font-size-27 govuk-!-margin-top-8" Related information
-
-ul.govuk-list
- - links.each do |text, link|
- li== link_to text, link
diff --git a/guide/layouts/partials/related-navigation.slim b/guide/layouts/partials/related-navigation.slim
new file mode 100644
index 00000000..2f9fc9bd
--- /dev/null
+++ b/guide/layouts/partials/related-navigation.slim
@@ -0,0 +1,10 @@
+.x-govuk-related-navigation class="govuk-!-margin-top-9"
+ nav.x-govuk-related-navigation__nav-section role="navigation" aria-labelledby="related"
+ h2#related.x-govuk-related-navigation__main-heading
+ | Related information
+
+ ul.x-govuk-related-navigation__link-list
+ - links.each do |name, path|
+ li.x-govuk-related-navigation__link
+ a.x-govuk-related-navigation__section-link.govuk-link href="#{path}"
+ | #{name}