Use 2/3 grid to constrain the width of cookie banner

alphagov · Feb 1, 2021 · 879997f · 879997f
1 parent b09e386
commit 879997f
Showing 1 changed file with 19 additions and 15 deletions.
diff --git a/src/govuk/components/cookie-banner/template.njk b/src/govuk/components/cookie-banner/template.njk
@@ -14,22 +14,26 @@
     {%- for attribute, value in banner.attributes %} {{attribute}}="{{value}}"{% endfor %}
     {% if banner.hidden %} hidden{% endif %}>
 
-      {% if banner.headingHtml or banner.headingText %}
-      <h2 class="govuk-cookie-banner__heading govuk-heading-m">
-        {%- if banner.headingHtml -%}
-          {{ banner.headingHtml | safe }}
-        {%- else -%}
-          {{ banner.headingText }}
-        {%- endif -%}
-      </h2>
-      {% endif %}
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+          {% if banner.headingHtml or banner.headingText %}
+          <h2 class="govuk-cookie-banner__heading govuk-heading-m">
+            {%- if banner.headingHtml -%}
+              {{ banner.headingHtml | safe }}
+            {%- else -%}
+              {{ banner.headingText }}
+            {%- endif -%}
+          </h2>
+          {% endif %}
 
-      <div class="govuk-cookie-banner__content">
-        {%- if banner.html -%}
-          {{ banner.html | safe }}
-        {%- elif banner.text -%}
-          <p class="govuk-body">{{ banner.text }}</p>
-        {%- endif -%}
+          <div class="govuk-cookie-banner__content">
+            {%- if banner.html -%}
+              {{ banner.html | safe }}
+            {%- elif banner.text -%}
+              <p class="govuk-body">{{ banner.text }}</p>
+            {%- endif -%}
+          </div>
+        </div>
       </div>
 
       {% if banner.actions %}