Use Callout for brand callouts

There's still some repeated content in the branding wording which might be able to be made reusable

Author: domoscargin

src/components/back-link/index.md

@@ -47,4 +47,4 @@ Use the `govuk-back-link--inverse` modifier class to show a white link on a dark
 
 Make sure all users can see the back link – the background colour must have a contrast ratio of at least 4.5:1 with white to meet [WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
 
-{{ example({ group: "components", item: "back-link", example: "inverse", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: "back-link", example: "inverse", html: true, nunjucks: true, open: false }) }}

src/components/breadcrumbs/index.md

@@ -47,4 +47,4 @@ Use the `govuk-breadcrumbs--inverse` modifier class to show white links and arro
 
 Make sure all users can see the breadcrumbs – the background colour must have a contrast ratio of at least 4.5:1 with white to [meet WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
 
-{{ example({ group: "components", item: "breadcrumbs", example: "inverse", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: "breadcrumbs", example: "inverse", html: true, nunjucks: true, open: false }) }}

src/components/cookie-banner/index.md

@@ -8,7 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
-{% from "_brand-callout.njk" import brandCallout %}
+{% from "_callout.njk" import callout %}
 
 Allow users to accept or reject cookies which are not essential to making your service work.
 
@@ -21,9 +21,9 @@ Allow users to accept or reject cookies which are not essential to making your s
 
 If you use the page template, you'll also get the Cookie banner without having to add it, as it's included by default. However, if you want to customise the default Cookie banner, read the [page template guidance about customising components](/styles/page-template/#changing-template-content).
 
-{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %}
+{% call callout({ tagText: "Brand", colour: "green" }) %}
 
-<h2>Brand changes to the {{title}} component</h2>
+<h2 class="app-callout__heading">Brand changes to the {{title}} component</h2>
 <p class="govuk-body">From June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand. </p>
 
 <p class="govuk-body">The updated colour palette changes the Cookie banner component’s background colour to light blue, instead of grey.</p>
@@ -202,4 +202,4 @@ We decided to remove the visible focus indicator from the confirmation message f
 - it's the first element, at the very top of the page
 - it displays in place of the cookie message, which is the last thing the user interacted with
 
-In this scenario, we assume that a visible focus indicator would be more likely to confuse users than to help them. However, we need more research to prove this.
+In this scenario, we assume that a visible focus indicator would be more likely to confuse users than to help them. However, we need more research to prove this.

src/components/footer/index.md

@@ -8,7 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
-{% from "_brand-callout.njk" import brandCallout %}
+{% from "_callout.njk" import callout %}
 {%- from "govuk/components/tag/macro.njk" import govukTag -%}
 
 The GOV.UK footer provides copyright, licensing and other information about your service.
@@ -22,9 +22,9 @@ The GOV.UK footer provides copyright, licensing and other information about your
 
 If you use the page template, you'll also get the footer without having to add it, as it's included by default. However, if you want to customise the default footer, read the [page template guidance about customising components](/styles/page-template/#changing-template-content).
 
-{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %}
+{% call callout({ tagText: "Brand", colour: "green" }) %}
 
-<h2>Brand changes to the {{title}} component</h2><p class="govuk-body">From June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.</p>
+<h2 class="app-callout__heading">Brand changes to the {{title}} component</h2><p class="govuk-body">From June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.</p>
 
 <p class="govuk-body">The updated {{title}} component:</p>
 <ul class="govuk-list">
@@ -92,4 +92,4 @@ Only add secondary GOV.UK navigation if you’re creating a GOV.UK service, and
 
 ### Footer with links and secondary navigation
 
-{{ example({ group: "components", item: "footer", example: "full", html: true, nunjucks: true, open: false, size: "xl" }) }}
+{{ example({ group: "components", item: "footer", example: "full", html: true, nunjucks: true, open: false, size: "xl" }) }}

src/components/header/index.md

@@ -8,7 +8,7 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
-{% from "_brand-callout.njk" import brandCallout %}
+{% from "_callout.njk" import callout %}
 
 The GOV.UK header component tells users they’re using a service on GOV.UK and lets them use GOV.UK-wide tools. Also known as the GOV.UK masthead.
 
@@ -21,9 +21,9 @@ The GOV.UK header component tells users they’re using a service on GOV.UK and
 
 If you use the page template, you'll also get the GOV.UK header without having to add it, as it's included by default. However, if you want to customise the default GOV.UK header, read the [page template guidance about customising components](/styles/page-template/#changing-template-content).
 
-{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %}
+{% call callout({ tagText: "Brand", colour: "green" }) %}
 
-<h2>Brand changes to the {{title}} component</h2>
+<h2 class="app-callout__heading">Brand changes to the {{title}} component</h2>
 <p class="govuk-body">From June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand. </p>
 
 <p class="govuk-body">The updated {{title}} component:</p>

src/components/service-navigation/index.md

@@ -8,14 +8,14 @@ layout: layout-pane.njk
 ---
 
 {% from "_example.njk" import example %}
-{% from "_brand-callout.njk" import brandCallout %}
+{% from "_callout.njk" import callout %}
 {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
 
 Service navigation helps users understand that they’re using your service and lets them navigate around your service.
 
-{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %}
+{% call callout({ tagText: "Brand", colour: "green" }) %}
 
-<h2>Brand changes to the {{title}} component</h2><p class="govuk-body">From June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.</p>
+<h2 class="app-callout__heading">Brand changes to the {{title}} component</h2><p class="govuk-body">From June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.</p>
 
 <p class="govuk-body">The updated {{title}} component:</p>
 <ul class="govuk-list">

src/styles/colour/index.md

@@ -10,11 +10,11 @@ order: 12
 ---
 
 {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-{% from "_brand-callout.njk" import brandCallout %}
+{% from "_callout.njk" import callout %}
 
 Always use the GOV.UK colour palette.
 
-{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %}
+{% call callout({ tagText: "Brand", colour: "green" }) %}
 
 <h2>Brand changes to {{title}}</h2>
 <p class="govuk-body">From June 2025, colours in some components will change to support a wider refresh of the GOV.UK brand. </p>