Component

Signup link

Renders a box with a link to sign up for email notifications

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/signup_link", {
  heading: "Sign up for email notifications",
  link_text: "Click right here to sign up!!",
  link_href: "/this-signs-you-up"
} %>

Accessibility acceptance criteria

  • the component must use the correct heading level for the page
  • text should have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
  • the icon must not be focusable or shown to screenreaders

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

With background and border (preview) 

<%= render "govuk_publishing_components/components/signup_link", {
  heading: "Sign up for email notifications",
  link_text: "Click right here to sign up!!",
  link_href: "/this-signs-you-up",
  background: true
} %>

With custom margin bottom (preview)

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to having no margin bottom.

<%= render "govuk_publishing_components/components/signup_link", {
  heading: "Sign up for email notifications",
  link_text: "Click right here to sign up!!",
  link_href: "/this-signs-you-up",
  margin_bottom: 8
} %>

With custom heading level (preview)

Override default heading level by passing through heading_level parameter (defaults to h3).

<%= render "govuk_publishing_components/components/signup_link", {
  heading: "Sign up for email notifications",
  link_text: "Click right here to sign up!!",
  link_href: "/this-signs-you-up",
  heading_level: 1
} %>