diff --git a/app/assets/stylesheets/components/page-footer.scss b/app/assets/stylesheets/components/page-footer.scss
index 4aea437c4..2a5e07613 100644
--- a/app/assets/stylesheets/components/page-footer.scss
+++ b/app/assets/stylesheets/components/page-footer.scss
@@ -28,6 +28,10 @@
 
   }
 
+  &-secondary-link {
+    display: block;
+    margin-top: $gutter;
+  }
 
   .button {}
 
diff --git a/app/templates/components/page-footer.html b/app/templates/components/page-footer.html
index 1ea1dae64..7c0153d58 100644
--- a/app/templates/components/page-footer.html
+++ b/app/templates/components/page-footer.html
@@ -3,6 +3,8 @@
   destructive=False,
   back_link=False,
   back_link_text="Back",
+  secondary_link=False,
+  secondary_link_text=None,
   delete_link=False,
   delete_link_text="delete"
 ) %}
@@ -19,5 +21,8 @@
     {% if back_link %}
       <a class="page-footer-back-link" href="{{ back_link }}">{{ back_link_text }}</a>
     {% endif %}
+    {% if secondary_link and secondary_link_text %}
+      <a class="page-footer-secondary-link" href="{{ secondary_link }}">{{ secondary_link_text }}</a>
+    {% endif %}
   </div>
 {% endmacro %}
diff --git a/app/templates/views/styleguide.html b/app/templates/views/styleguide.html
index a27dbe7f9..6455a0ff5 100644
--- a/app/templates/views/styleguide.html
+++ b/app/templates/views/styleguide.html
@@ -117,6 +117,10 @@
     button_text='Send', back_link='http://example.com', back_link_text="Back to dashboard"
   ) }}
 
+  {{ page_footer(
+    button_text='Sign in', secondary_link='http://example.com', secondary_link_text="I’ve forgotten my password"
+  ) }}
+
   <h2 class="heading-large">SMS message</h2>
 
   <p>Used to show, preview or choose an SMS message.</p>