Improve robustness of description colour in masthead component

x-govuk · Dec 24, 2023 · d1f812d · d1f812d
1 parent 7567ad8
commit d1f812d
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/docs/masthead.md b/docs/masthead.md
@@ -69,7 +69,7 @@ If you’re using Nunjucks macros in production with `html` options, or ones end
     [
       { text: "description" },
       { text: "object" },
-      { text: "Description text shown in the masthead. See [description](#description)." | markdown }
+      { text: "Short description text shown below the title. See [description](#description)." | markdown }
     ],
     [
       { text: "startButton" },

diff --git a/x-govuk/components/masthead/_masthead.scss b/x-govuk/components/masthead/_masthead.scss
@@ -25,6 +25,7 @@ $x-govuk-masthead-text-colour: govuk-colour("white");
 .x-govuk-masthead__description {
   @include govuk-font($size: 24);
   @include govuk-responsive-margin(6, "bottom");
+  color: $x-govuk-masthead-text-colour;
 
   a {
     @include govuk-link-style-inverse;

diff --git a/x-govuk/components/masthead/template.njk b/x-govuk/components/masthead/template.njk
@@ -30,9 +30,9 @@
         </h1>
       {% endif %}
       {% if params.description %}
-        <div class="x-govuk-masthead__description{%- if params.description.classes %} {{ params.description.classes }}{% endif %}">
+        <p class="x-govuk-masthead__description{%- if params.description.classes %} {{ params.description.classes }}{% endif %}">
           {{ params.description.html | safe if params.description.html else params.description.text }}
-        </div>
+        </p>
       {% endif %}
       {% if params.startButton %}
         {{ govukButton({