diff --git a/app/assets/stylesheets/components/_contents-list.scss b/app/assets/stylesheets/components/_contents-list.scss
index c9cf0d5a4..5cd94a33f 100644
--- a/app/assets/stylesheets/components/_contents-list.scss
+++ b/app/assets/stylesheets/components/_contents-list.scss
@@ -10,6 +10,18 @@
   box-shadow: 0 20px 15px -10px $white;
 }
 
+.app-c-contents-list--no-underline {
+  .app-c-contents-list__link {
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
 .app-c-contents-list__link {
   .app-c-contents-list__list-item--parent > & {
     font-weight: bold;
diff --git a/app/views/components/_contents-list.html.erb b/app/views/components/_contents-list.html.erb
index 113e06d93..41d8551cf 100644
--- a/app/views/components/_contents-list.html.erb
+++ b/app/views/components/_contents-list.html.erb
@@ -1,5 +1,6 @@
 <%
   format_numbers ||= false
+  underline_links ||= false
   contents ||= []
   aria_label ||= ''
   nested = !!contents.find { |c| c[:items] && c[:items].any? }
@@ -14,7 +15,7 @@
 <% if contents.any? %>
   <nav
     role="navigation"
-    class="app-c-contents-list"
+    class="app-c-contents-list <%= 'app-c-contents-list--no-underline' unless underline_links %>"
     data-module="track-click"
     <% if aria_label.present? %>
       aria-label="<%= aria_label %>"
diff --git a/app/views/components/docs/contents-list.yml b/app/views/components/docs/contents-list.yml
index 78d32bc8b..6f02d488b 100644
--- a/app/views/components/docs/contents-list.yml
+++ b/app/views/components/docs/contents-list.yml
@@ -33,6 +33,17 @@ examples:
           text: Second thing
         - href: "#third-thing"
           text: Third thing
+  underline_links:
+    description: By default we do not underline links in this component even though this is the general approach on GOV.UK. This is because some of the examples below (particularly those with numbers) do not work well with underlined links. Instead, this option allows the links to be underlined where appropriate.
+    data:
+      underline_links: true
+      contents:
+        - href: "#first-thing"
+          text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        - href: "#second-thing"
+          text: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        - href: "#third-thing"
+          text: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   long_text:
     data:
       contents:
diff --git a/app/views/content_items/guide.html.erb b/app/views/content_items/guide.html.erb
index 70f6db782..d0c4f5d34 100644
--- a/app/views/content_items/guide.html.erb
+++ b/app/views/content_items/guide.html.erb
@@ -4,7 +4,7 @@
     <%= render 'govuk_component/title', { title: @content_item.title } %>
     <% if @content_item.multi_page_guide? %>
       <aside class="part-navigation-container" role="complementary">
-        <%= render "components/contents-list", aria_label: 'Pages in this guide', contents: @content_item.part_link_elements %>
+        <%= render "components/contents-list", aria_label: 'Pages in this guide', contents: @content_item.part_link_elements, underline_links: true %>
       </aside>
     <% end %>
   </div>
diff --git a/test/components/contents_list_component_test.rb b/test/components/contents_list_component_test.rb
index 2b1229f3a..d58be48d5 100644
--- a/test/components/contents_list_component_test.rb
+++ b/test/components/contents_list_component_test.rb
@@ -42,11 +42,17 @@ def assert_tracking_link(name, value, total = 1)
 
   test "renders a list of contents links" do
     render_component(contents: contents_list)
-    assert_select ".app-c-contents-list"
+    assert_select ".app-c-contents-list.app-c-contents-list--no-underline"
     assert_select ".app-c-contents-list__link[href='/one']", text: "1. One"
     assert_select ".app-c-contents-list__link[href='/two']", text: "2. Two"
   end
 
+  test "renders with the underline option" do
+    render_component(contents: contents_list, underline_links: true)
+    assert_select ".app-c-contents-list"
+    assert_select ".app-c-contents-list.app-c-contents-list--no-underline", false
+  end
+
   test "renders text only when link is active" do
     render_component(contents: contents_list_with_active_item)
     assert_select ".app-c-contents-list"