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

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