replace read only card heading with a p tag

nhsuk · Sep 11, 2024 · 04e8130 · 04e8130
1 parent d48addf
commit 04e8130
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -76,6 +76,11 @@ $card-border-hover-color: $color_nhsuk-grey-3;
     }
   }
 
+  &__title {
+    @include nhsuk-typography-responsive(22);
+    font-weight: bold;
+  }
+
   &__below {
     :last-child {
       margin-bottom: 0;

diff --git a/src/components/card/card-group.njk b/src/components/card/card-group.njk
@@ -14,6 +14,8 @@
       description: cardItem.description,
       badgeLarge: cardItem.badgeLarge,
       prefixIcon: cardItem.prefixIcon,
+      readOnly: cardItem.readOnly,
+      headingLevel: cardItem.headingLevel,
       isListItem: true
     }) }}
   {% endfor %}

diff --git a/src/components/card/card.njk b/src/components/card/card.njk
@@ -21,7 +21,7 @@
         </div>
       {%- endif -%}
       {%- if params.readOnly -%}
-        <h3 class="nhsapp-card__title">{{ params.title }}</h3>
+        <p class="nhsapp-card__title">{{ params.title }}</p>
       {%- else -%}
         <a href="{{ params.href }}" class="nhsapp-card__link nhsuk-link--no-visited-state" 
       {%- if params.linkAriaLabel %} aria-label="{{ params.linkAriaLabel }}" {% endif %}>
@@ -45,7 +45,7 @@
       }) }}
     {% endif %}
     {%- if not params.readOnly -%}
-      {{ icon('chevronRight') }}
+      {{ nhsappIcon('chevronRight') }}
     {%- endif -%}
   </div>
 {%- if params.isListItem -%}

diff --git a/src/styles/section-heading/section-heading.njk b/src/styles/section-heading/section-heading.njk
@@ -1,10 +1,11 @@
 {% set subheadingClass = 'nhsuk-u-margin-bottom-3' if params.subheadingText else '' %}
+{% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
 
 <div class="nhsapp-section-heading 
 {{ params.classes if params.classes }}">
-  <h2 class="nhsuk-heading-s {{ subheadingClass }}">
+  <h{{ headingLevel }} class="nhsuk-heading-s {{ subheadingClass }}">
     {{ params.headingText }}
-  </h2>
+  </h{{ headingLevel }}>
   {% if params.linkText and params.linkUrl %}
     <a 
       class="nhsuk-link nhsuk-link--no-visited-state nhsuk-u-nowrap"