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
} %>

Link only (preview)

If no heading text is passed through, a more compact, link only version is rendered.

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

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
} %>