Component

Devolved Nations (experimental)

A banner for linking to alternative content for other nations.

The component replaces uses of the important metadata component for alternative content for other nations.

The component can display:

  • nations that the alternative content relates to
  • a list of alternative URLs where applicable

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Applies to England

How to call this component

<%= render "govuk_publishing_components/components/devolved_nations", {
  national_applicability: {
    england: {
      applicable: true
    }
  }
} %>

Accessibility acceptance criteria

The component must:

  • Provide context for link text to highlight alternative content is available.

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

Applies to two nations (preview)

Applies to England and Wales 

<%= render "govuk_publishing_components/components/devolved_nations", {
  national_applicability: {
    england: {
      applicable: true
    },
    wales: {
      applicable: true
    }
  }
} %>

Applies to three nations (preview)

Applies to England, Scotland and Wales 

<%= render "govuk_publishing_components/components/devolved_nations", {
  national_applicability: {
    england: {
      applicable: true
    },
    scotland: {
      applicable: true
    },
    wales: {
      applicable: true
    }
  }
} %>

Applies to one nation individual publication available (preview)

If no content type, or an invalid type, is specified then the default alternative content type is displayed as “Publication” e.g. “Publication for Northern Ireland”

<%= render "govuk_publishing_components/components/devolved_nations", {
  national_applicability: {
    england: {
      applicable: true
    },
    northern_ireland: {
      applicable: false,
      alternative_url: "/"
    },
    scotland: {
      applicable: false,
      alternative_url: "/"
    },
    wales: {
      applicable: false,
      alternative_url: "/"
    }
  }
} %>

Applies to three nations individual publication available (preview)

Applies to England, Scotland and Wales 

<%= render "govuk_publishing_components/components/devolved_nations", {
  national_applicability: {
    england: {
      applicable: true
    },
    northern_ireland: {
      applicable: false,
      alternative_url: "/"
    },
    scotland: {
      applicable: true
    },
    wales: {
      applicable: true
    }
  }
} %>

Applies to one nation individual consultation available (preview)

Specify alternative type for the content e.g. Consultation

<%= render "govuk_publishing_components/components/devolved_nations", {
  national_applicability: {
    england: {
      applicable: true
    },
    northern_ireland: {
      applicable: false,
      alternative_url: "/"
    }
  },
  type: "consultation"
} %>

Applies to one nation individual guidance available (preview)

Specify alternative type for the content e.g. Guidance

Applies to England 

<%= render "govuk_publishing_components/components/devolved_nations", {
  national_applicability: {
    england: {
      applicable: true
    },
    northern_ireland: {
      applicable: false,
      alternative_url: "/"
    }
  },
  type: "detailed_guide"
} %>

Specific heading level (preview)

Use a different heading level for the main link title. Defaults to h2 if not passed.

Applies to England 

<%= render "govuk_publishing_components/components/devolved_nations", {
  heading_level: 3,
  national_applicability: {
    england: {
      applicable: true
    }
  }
} %>

Without ga4 tracking (preview)

Disables GA4 tracking on the banner. Tracking is enabled by default. This includes link tracking on the component itself, and allows pageviews to record the presence of the banner on page load.

Applies to England, Scotland and Wales 

<%= render "govuk_publishing_components/components/devolved_nations", {
  national_applicability: {
    england: {
      applicable: true
    },
    scotland: {
      applicable: true
    },
    wales: {
      applicable: true
    },
    northern_ireland: {
      applicable: false,
      alternative_url: "/"
    }
  },
  type: "detailed_guide",
  ga4_tracking: true
} %>