Component

Subscription links

Links to ‘Get emails’ and ‘Subscribe to feed’

NOTE: This component includes a h2 heading by default but can be suppressed by using hide_heading option (see below)

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Subscriptions

How to call this component

<%= render "govuk_publishing_components/components/subscription_links", {
  email_signup_link: "/foreign-travel-advice/singapore/email-signup",
  feed_link: "/foreign-travel-advice/singapore.atom"
} %>

Accessibility acceptance criteria

Icons in subscription links must be presentational and ignored by screen readers.

Toggle elements in the component must:

be usable with a keyboard
be usable with touch
be recognised by screen readers as a button
announce to screen readers whether they are expanded or collapsed
show hidden elements by default when JavaScript is disabled

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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

id - accepts a string for the element ID attribute
data_attributes - accepts a hash of data attributes
aria - accepts a hash of aria attributes
classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
role - accepts a space separated string of roles
lang - accepts a language attribute value
open - accepts an open attribute value (true or false)
hidden - accepts an empty string, ‘hidden’, or ‘until-found’
tabindex - accepts an integer. The integer can also be passed as a string
dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
rel - accepts any valid rel attribute e.g. ‘nofollow’
target - accepts a valid target attribute e.g. ‘_blank’
title - accepts any string
draggable - accepts a draggable attribute value (“true” or “false”)

With margin (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, although some margin is supplied by the links themselves (so that when they stack on mobile there is space between them).

Subscriptions

<%= render "govuk_publishing_components/components/subscription_links", {
  email_signup_link: "/foreign-travel-advice/singapore/email-signup",
  feed_link: "/foreign-travel-advice/singapore.atom",
  margin_bottom: 9
} %>

With only email signup link (preview)

Subscriptions

Get emails

<%= render "govuk_publishing_components/components/subscription_links", {
  email_signup_link: "/foreign-travel-advice/singapore/email-signup"
} %>

With only feed link (preview)

Subscriptions

Subscribe to feed

<%= render "govuk_publishing_components/components/subscription_links", {
  feed_link: "/foreign-travel-advice/singapore.atom"
} %>

With custom text (preview)

Subscriptions

<%= render "govuk_publishing_components/components/subscription_links", {
  email_signup_link: "/foreign-travel-advice/singapore/email-signup",
  email_signup_link_text: "Get notifications",
  feed_link: "/foreign-travel-advice/singapore.atom",
  feed_link_text: "View feed"
} %>

With copyable feed link (preview)

This option changes the feed link to a toggle control, which opens a hidden element containing an input prepopulated with the value passed to the component, usually a URL to an atom feed. This uses the form input component.

Note that this option overrides the feed_link option, so if both are passed feed_link is ignored. Note that a value for email_signup_link can also be passed as normal.

Subscriptions

Get emails

Subscribe to feed

Copy and paste this URL into your feed reader

<%= render "govuk_publishing_components/components/subscription_links", {
  email_signup_link: "/foreign-travel-advice/singapore/email-signup",
  feed_link_box_value: "https://www.gov.uk/government/organisations/attorney-generals-office.atom"
} %>

With number 10 branding (preview)

Organisation colour branding can be added to the component as shown.

Subscriptions

<%= render "govuk_publishing_components/components/subscription_links", {
  brand: "prime-ministers-office-10-downing-street",
  email_signup_link: "/foreign-travel-advice/singapore/email-signup",
  feed_link: "/foreign-travel-advice/singapore.atom"
} %>

With data attributes on links (preview)

Data attributes can be passed for each link as shown.

Subscriptions

Get emails

Subscribe to feed

Copy and paste this URL into your feed reader

<%= render "govuk_publishing_components/components/subscription_links", {
  email_signup_link: "/foreign-travel-advice/singapore/email-signup",
  email_signup_link_data_attributes: {
    an_attribute: "some_value"
  },
  feed_link_box_value: "https://www.gov.uk/government/organisations/attorney-generals-office.atom",
  feed_link_data_attributes: {
    an_attribute: "some_value"
  }
} %>

As small form (preview)

Subscriptions

<%= render "govuk_publishing_components/components/subscription_links", {
  email_signup_link: "/foreign-travel-advice/singapore/email-signup",
  feed_link: "/foreign-travel-advice/singapore.atom",
  small_form: true
} %>

Without heading (preview)

By default the component includes an h2 heading. The component could be used anywhere on the page and could mean that it produces invalid markup or make the site unaccessible.

<%= render "govuk_publishing_components/components/subscription_links", {
  email_signup_link: "/foreign-travel-advice/singapore/email-signup",
  feed_link: "/foreign-travel-advice/singapore.atom",
  hide_heading: true
} %>

With a different language (preview)

The component is used on translated pages that don’t have a translation for the text strings. This means that it could display the fallback English string if the translate method can’t find an appropriate translation. This makes sure that the lang can be set to ensure that browsers understand which parts of the page are in each language.

The lang attribute must be set to a valid BCP47 string. A valid code can be the two or three letter language code - for example, English is en or eng, Korean is ko or kor - but if in doubt please check.

Subscriptions

<%= render "govuk_publishing_components/components/subscription_links", {
  email_signup_link: "/foreign-travel-advice/singapore/email-signup",
  email_signup_link_text: "Recevez des notifications",
  email_signup_link_text_locale: "fr",
  feed_link: "/foreign-travel-advice/singapore.atom",
  feed_link_text: "Flux RSS",
  feed_link_text_locale: "fr"
} %>