Skip to main content
  1. Home
  2. Link helpers

Link helpers

In addition to the components, this gem also comes with link helpers that are often reimplemented across projects.

Regular links are just plain anchor elements with the govuk-link class.

Input

= govuk_link_to 'A regular hyperlink', '#'
<%= govuk_link_to 'A regular hyperlink', '#' %>

Output

A regular hyperlink 
<a class="govuk-link" href="#">
  A regular hyperlink
</a>

Use inverse hyperlinks on dark backgrounds.

Input

= govuk_link_to 'An inverse hyperlink', '#', inverse: true
<%= govuk_link_to 'An inverse hyperlink', '#', inverse: true %>

Output

An inverse hyperlink 
<a class="govuk-link govuk-link--inverse" href="#">
  An inverse hyperlink
</a>

Input

p
  = govuk_link_to 'A hyperlink without an underline', '#', no_underline: true

p
  = govuk_link_to 'A hyperlink without a visited state', '#', no_visited_state: true

p
  = govuk_link_to 'A text-coloured hyperlink', '#', text_colour: true
<p>
  <%= govuk_link_to 'A hyperlink without an underline', '#', no_underline: true %>
</p>
<p>
  <%= govuk_link_to 'A hyperlink without a visited state', '#', no_visited_state: true %>
</p>
<p>
  <%= govuk_link_to 'A text-coloured hyperlink', '#', text_colour: true %>
</p>

Output

A hyperlink without an underline

A hyperlink without a visited state

A text-coloured hyperlink 

<p>
  <a class="govuk-link govuk-link--no-underline" href="#">
    A hyperlink without an underline
  </a>
</p>
<p>
  <a class="govuk-link govuk-link--no-visited-state" href="#">
    A hyperlink without a visited state
  </a>
</p>
<p>
  <a class="govuk-link govuk-link--text-colour" href="#">
    A text-coloured hyperlink
  </a>
</p>

Class helpers

Rails has lots of link helpers and only the most frequently used are wrapped by this library. If you need to use another variant, like link_to_if, you can use the govuk_link_classes and govuk_button_classes helpers to ensure the correct classes are assigned.

Using the class helpers

When no arguments are provided to govuk_link_classes, only the default govuk-link will be added. Alternate styles can be passed in as a snake cased array of variants.

Input

p
  = link_to_if(true,
    'A regular link generated by Rails',
    '#',
    class: govuk_link_classes)

p
  = link_to_if(true,
    'A muted and not underlined link generated by Rails',
    '#',
    class: govuk_link_classes(:muted, :no_underline))
<p>
  <%= link_to_if(true, 'A regular link generated by Rails', '#', class: govuk_link_classes) %>
</p>
<p>
  <%= link_to_if(true, 'A muted and not underlined link generated by Rails', '#', class: govuk_link_classes(:muted, :no_underline)) %>
</p>

Output

A regular link generated by Rails

A muted and not underlined link generated by Rails 

<p>
  <a class="govuk-link" href="#">
    A regular link generated by Rails
  </a>
</p>
<p>
  <a class="govuk-link govuk-link--muted govuk-link--no-underline" href="#">
    A muted and not underlined link generated by Rails
  </a>
</p>