nhsuk-frontend 10.2.0 → 10.2.1

package/dist/nhsuk/common/nhsuk-frontend-version.js

@@ -10,7 +10,7 @@
  *
  * {@link https://github.com/nhsuk/nhsuk-frontend/releases}
  */
-const version = '10.2.0';
+const version = '10.2.1';
 
 exports.version = version;
 //# sourceMappingURL=nhsuk-frontend-version.js.map

package/dist/nhsuk/common/nhsuk-frontend-version.mjs

@@ -8,7 +8,7 @@
  *
  * {@link https://github.com/nhsuk/nhsuk-frontend/releases}
  */
-const version = '10.2.0';
+const version = '10.2.1';
 
 export { version };
 //# sourceMappingURL=nhsuk-frontend-version.mjs.map

package/dist/nhsuk/components/card/_index.scss

@@ -177,14 +177,14 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
     @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);
   }
 
-  .nhsuk-card--feature .nhsuk-card__heading,
+  .nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,
   // Deprecated, to be removed in v11.0
   .nhsuk-card__heading--feature {
     @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);
   }
 
-  .nhsuk-card--feature .nhsuk-card__heading-container,
-  .nhsuk-card--feature .nhsuk-card__content,
+  .nhsuk-card--feature > .nhsuk-card__heading-container,
+  .nhsuk-card--feature > .nhsuk-card__content,
   // Deprecated, to be removed in v11.0
   .nhsuk-card__content--feature {
     padding: 0; // [7]
@@ -197,7 +197,7 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
     @include nhsuk-responsive-margin(7, "top");
   }
 
-  .nhsuk-card--care .nhsuk-card__heading-container,
+  .nhsuk-card--care > .nhsuk-card__heading-container,
   // Deprecated, to be removed in v11.0
   .nhsuk-card--care__heading-container {
     position: relative;
@@ -206,7 +206,7 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
     border-bottom: 1px solid transparent;
   }
 
-  .nhsuk-card--care .nhsuk-card__heading,
+  .nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,
   // Deprecated, to be removed in v11.0
   .nhsuk-card--care__heading {
     margin: 0;
@@ -315,7 +315,7 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
 
   // Card primary
 
-  .nhsuk-card--primary .nhsuk-card__content,
+  .nhsuk-card--primary > .nhsuk-card__content,
   // Deprecated, to be removed in v11.0
   .nhsuk-card__content--primary {
     @include nhsuk-responsive-spacing(5, "padding", $direction: "right", $adjustment: nhsuk-spacing(7));
@@ -355,8 +355,8 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
     background: transparent;
   }
 
-  .nhsuk-card--secondary .nhsuk-card__heading-container,
-  .nhsuk-card--secondary .nhsuk-card__content,
+  .nhsuk-card--secondary > .nhsuk-card__heading-container,
+  .nhsuk-card--secondary > .nhsuk-card__content,
   // Deprecated, to be removed in v11.0
   .nhsuk-card__content--secondary {
     padding-top: 0;

package/dist/nhsuk/components/card/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/nhsuk/components/card/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n\n////\n/// Card component\n///\n/// 1. Is needed for the :active top positioning, and invisible clickable overlay.\n/// 2. Border is used to create a divider between the white content\n///    box and an image.\n/// 3. Creates the 'pressed down' effect when clicked.\n/// 4. Removes padding-top from headings directly after the card group.\n/// 5. Includes the border width to achieve the correct left alignment.\n/// 6. Stops the heading from spanning the full width of the card.\n/// 7. Removes padding as added to container by nhsuk-panel-with-label mixin.\n/// 8. Default care card colour set to blue (non-urgent care card) -\n///    using the @mixin care-card tools/_mixins.scss.\n///    The same mixin is used for each care card, setting the background\n///    colour,text colour and print border width with the variables.\n/// 9. 'Random number' for the heading triangle.\n/// 10. 'Random number' for the heading triangle positioning.\n/// 11. 'Random number' used for spacing to compensate for the triangle.\n/// 12. Needed to enable the triangle to show correctly in high contrast mode.\n/// 13. Prevent additional padding on headings\n/// 14. Give the action link icon sufficient contrast when used in the emergency variant\n/// 15. Reset the positioning to the default [1] to display heading triangle on a coloured background.\n/// 16. Emergency care card <a> needs to be white because the background colour is black.\n/// 17. Trick IE10 into rendering the invisible clickable area. Without this it does not.\n///\n/// @group components/card\n////\n\n$nhsuk-card-border-width: 1px;\n$nhsuk-card-border-bottom-width: nhsuk-spacing(1);\n$nhsuk-card-border-colour: $nhsuk-border-colour;\n$nhsuk-card-border-hover-colour: $nhsuk-border-hover-colour;\n\n// @deprecated To be removed in v11.0\n$card-border-width: $nhsuk-card-border-width;\n$card-border-bottom-width: $nhsuk-card-border-bottom-width;\n$card-border-color: $nhsuk-card-border-colour;\n$card-border-colour: $nhsuk-card-border-colour;\n$card-border-hover-color: $nhsuk-card-border-hover-colour;\n$card-border-hover-colour: $nhsuk-card-border-hover-colour;\n\n@include nhsuk-exports(\"nhsuk/components/card\") {\n  .nhsuk-card {\n    box-sizing: border-box;\n    position: relative; // [1]\n    width: 100%;\n\n    @include nhsuk-panel($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n  }\n\n  .nhsuk-card__img {\n    display: block;\n    width: 100%;\n    border-bottom: $nhsuk-card-border-width solid nhsuk-colour(\"grey-5\"); // [2]\n\n    @include nhsuk-print-hide;\n  }\n\n  .nhsuk-card__content {\n    @include nhsuk-top-and-bottom;\n    @include nhsuk-responsive-padding(5);\n  }\n\n  .nhsuk-card__heading {\n    margin-bottom: nhsuk-spacing(3);\n\n    &:has(+ .nhsuk-icon) {\n      margin-bottom: 0;\n    }\n  }\n\n  .nhsuk-card__heading-container,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading-container {\n    @include nhsuk-responsive-padding(5);\n  }\n\n  .nhsuk-card__heading-container {\n    &:last-child {\n      @include nhsuk-top-and-bottom;\n    }\n\n    &:not(:last-child) {\n      padding-bottom: 0;\n    }\n\n    + .nhsuk-card__content {\n      padding-top: 0;\n    }\n  }\n\n  .nhsuk-card__description {\n    margin-bottom: 0;\n  }\n\n  // Clickable card\n\n  .nhsuk-card--clickable {\n    border-bottom-width: $nhsuk-card-border-bottom-width;\n\n    .nhsuk-card__heading a,\n    .nhsuk-card__link {\n      &::before {\n        content: \"\";\n\n        display: block;\n\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n\n        background-color: rgba(255, 255, 255, 0); // [17]\n      }\n    }\n\n    &:active {\n      bottom: -$nhsuk-card-border-width; // [3]\n      border-color: $nhsuk-card-border-hover-colour;\n    }\n  }\n\n  // Card group\n  //\n  // Allows you to have a row of cards.\n  // Flexbox is used to make each card in a row the same height.\n\n  .nhsuk-card-group {\n    margin-bottom: nhsuk-spacing(3);\n    padding: 0;\n\n    @include nhsuk-flex;\n\n    @include nhsuk-media-query($until: desktop) {\n      margin-bottom: nhsuk-spacing(6);\n    }\n\n    + h2,\n    + .nhsuk-heading-l,\n    + h3,\n    + .nhsuk-heading-m {\n      padding-top: 0; // [4]\n    }\n  }\n\n  .nhsuk-card-group__item {\n    margin-bottom: 0;\n    list-style-type: none;\n\n    @include nhsuk-flex-item;\n\n    .nhsuk-card {\n      margin-bottom: nhsuk-spacing(5);\n    }\n\n    @include nhsuk-media-query($until: desktop) {\n      .nhsuk-card {\n        margin-bottom: nhsuk-spacing(3);\n      }\n\n      &:last-child .nhsuk-card {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  // Card feature\n\n  .nhsuk-card--feature {\n    @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n  }\n\n  .nhsuk-card--feature .nhsuk-card__heading,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__heading--feature {\n    @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);\n  }\n\n  .nhsuk-card--feature .nhsuk-card__heading-container,\n  .nhsuk-card--feature .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--feature {\n    padding: 0; // [7]\n  }\n\n  // Care card\n\n  .nhsuk-card--care {\n    @include nhsuk-care-card($nhsuk-brand-colour, $nhsuk-reverse-text-colour, 4px); // [8]\n    @include nhsuk-responsive-margin(7, \"top\");\n  }\n\n  .nhsuk-card--care .nhsuk-card__heading-container,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading-container {\n    position: relative;\n    padding-top: nhsuk-spacing(3);\n    padding-bottom: nhsuk-spacing(3) - 1px;\n    border-bottom: 1px solid transparent;\n  }\n\n  .nhsuk-card--care .nhsuk-card__heading,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading {\n    margin: 0;\n    padding-top: 0; // [13]\n\n    @include nhsuk-font(26, $weight: bold);\n    @include nhsuk-print-colour;\n  }\n\n  .nhsuk-card--care__arrow {\n    display: block;\n\n    position: absolute;\n    bottom: -11px; // [9]\n    left: 30px; // [10]\n\n    width: 20px; // [9]\n    height: 20px; // [9]\n\n    overflow: hidden;\n\n    transform: rotate(45deg);\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      left: 38px; // [10]\n    }\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      display: block;\n\n      position: absolute;\n      top: 0;\n\n      width: 0;\n      height: 0;\n\n      transform: rotate(45deg); // [12]\n\n      border: solid 32px $nhsuk-brand-colour; // [9]\n    }\n  }\n\n  .nhsuk-card--care .nhsuk-card__content {\n    @include nhsuk-responsive-padding(5, \"top\");\n  }\n\n  .nhsuk-card--care--urgent {\n    @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 6px);\n\n    .nhsuk-card--care__arrow {\n      &::before,\n      &::after {\n        border-color: nhsuk-colour(\"red\");\n      }\n    }\n  }\n\n  .nhsuk-card--care--emergency {\n    @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 8px);\n\n    .nhsuk-card--care__arrow {\n      &::before,\n      &::after {\n        border-color: nhsuk-colour(\"red\");\n      }\n    }\n\n    .nhsuk-card__content {\n      position: static; // [15]\n      border: 0;\n      color: $nhsuk-reverse-text-colour;\n      background-color: nhsuk-colour(\"black\");\n\n      a:not(.nhsuk-action-link):not(.nhsuk-button) {\n        @include nhsuk-link-style-white;\n      }\n\n      @include nhsuk-print-colour {\n        background-color: $nhsuk-card-background-colour;\n      }\n    }\n\n    .nhsuk-details,\n    .nhsuk-details__summary {\n      color: $nhsuk-reverse-text-colour;\n    }\n\n    .nhsuk-details__summary {\n      &:hover {\n        color: $nhsuk-reverse-text-colour;\n      }\n\n      &:focus {\n        color: $nhsuk-focus-text-colour;\n      }\n    }\n\n    .nhsuk-action-link__link .nhsuk-icon {\n      fill: $nhsuk-reverse-text-colour; // [14]\n    }\n  }\n\n  // Card primary\n\n  .nhsuk-card--primary .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--primary {\n    @include nhsuk-responsive-spacing(5, \"padding\", $direction: \"right\", $adjustment: nhsuk-spacing(7));\n\n    @include nhsuk-media-query($from: desktop) {\n      height: 100%;\n    }\n  }\n\n  .nhsuk-card--primary,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--primary {\n    .nhsuk-icon {\n      display: block;\n\n      position: absolute;\n      top: 50%;\n\n      width: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      height: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      margin-top: math.floor(math.div($nhsuk-icon-size-large, -2));\n\n      pointer-events: none;\n\n      fill: $nhsuk-link-colour;\n      @include nhsuk-responsive-spacing(5, \"right\");\n    }\n  }\n\n  // Card secondary\n\n  .nhsuk-card--secondary {\n    border-top: 0;\n    border-right: 0;\n    border-bottom: $nhsuk-card-border-bottom-width solid $nhsuk-card-border-colour;\n    border-left: 0;\n    background: transparent;\n  }\n\n  .nhsuk-card--secondary .nhsuk-card__heading-container,\n  .nhsuk-card--secondary .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--secondary {\n    padding-top: 0;\n    padding-right: 0;\n    padding-left: 0;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/nhsuk/components/card/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n\n////\n/// Card component\n///\n/// 1. Is needed for the :active top positioning, and invisible clickable overlay.\n/// 2. Border is used to create a divider between the white content\n///    box and an image.\n/// 3. Creates the 'pressed down' effect when clicked.\n/// 4. Removes padding-top from headings directly after the card group.\n/// 5. Includes the border width to achieve the correct left alignment.\n/// 6. Stops the heading from spanning the full width of the card.\n/// 7. Removes padding as added to container by nhsuk-panel-with-label mixin.\n/// 8. Default care card colour set to blue (non-urgent care card) -\n///    using the @mixin care-card tools/_mixins.scss.\n///    The same mixin is used for each care card, setting the background\n///    colour,text colour and print border width with the variables.\n/// 9. 'Random number' for the heading triangle.\n/// 10. 'Random number' for the heading triangle positioning.\n/// 11. 'Random number' used for spacing to compensate for the triangle.\n/// 12. Needed to enable the triangle to show correctly in high contrast mode.\n/// 13. Prevent additional padding on headings\n/// 14. Give the action link icon sufficient contrast when used in the emergency variant\n/// 15. Reset the positioning to the default [1] to display heading triangle on a coloured background.\n/// 16. Emergency care card <a> needs to be white because the background colour is black.\n/// 17. Trick IE10 into rendering the invisible clickable area. Without this it does not.\n///\n/// @group components/card\n////\n\n$nhsuk-card-border-width: 1px;\n$nhsuk-card-border-bottom-width: nhsuk-spacing(1);\n$nhsuk-card-border-colour: $nhsuk-border-colour;\n$nhsuk-card-border-hover-colour: $nhsuk-border-hover-colour;\n\n// @deprecated To be removed in v11.0\n$card-border-width: $nhsuk-card-border-width;\n$card-border-bottom-width: $nhsuk-card-border-bottom-width;\n$card-border-color: $nhsuk-card-border-colour;\n$card-border-colour: $nhsuk-card-border-colour;\n$card-border-hover-color: $nhsuk-card-border-hover-colour;\n$card-border-hover-colour: $nhsuk-card-border-hover-colour;\n\n@include nhsuk-exports(\"nhsuk/components/card\") {\n  .nhsuk-card {\n    box-sizing: border-box;\n    position: relative; // [1]\n    width: 100%;\n\n    @include nhsuk-panel($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n  }\n\n  .nhsuk-card__img {\n    display: block;\n    width: 100%;\n    border-bottom: $nhsuk-card-border-width solid nhsuk-colour(\"grey-5\"); // [2]\n\n    @include nhsuk-print-hide;\n  }\n\n  .nhsuk-card__content {\n    @include nhsuk-top-and-bottom;\n    @include nhsuk-responsive-padding(5);\n  }\n\n  .nhsuk-card__heading {\n    margin-bottom: nhsuk-spacing(3);\n\n    &:has(+ .nhsuk-icon) {\n      margin-bottom: 0;\n    }\n  }\n\n  .nhsuk-card__heading-container,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading-container {\n    @include nhsuk-responsive-padding(5);\n  }\n\n  .nhsuk-card__heading-container {\n    &:last-child {\n      @include nhsuk-top-and-bottom;\n    }\n\n    &:not(:last-child) {\n      padding-bottom: 0;\n    }\n\n    + .nhsuk-card__content {\n      padding-top: 0;\n    }\n  }\n\n  .nhsuk-card__description {\n    margin-bottom: 0;\n  }\n\n  // Clickable card\n\n  .nhsuk-card--clickable {\n    border-bottom-width: $nhsuk-card-border-bottom-width;\n\n    .nhsuk-card__heading a,\n    .nhsuk-card__link {\n      &::before {\n        content: \"\";\n\n        display: block;\n\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n\n        background-color: rgba(255, 255, 255, 0); // [17]\n      }\n    }\n\n    &:active {\n      bottom: -$nhsuk-card-border-width; // [3]\n      border-color: $nhsuk-card-border-hover-colour;\n    }\n  }\n\n  // Card group\n  //\n  // Allows you to have a row of cards.\n  // Flexbox is used to make each card in a row the same height.\n\n  .nhsuk-card-group {\n    margin-bottom: nhsuk-spacing(3);\n    padding: 0;\n\n    @include nhsuk-flex;\n\n    @include nhsuk-media-query($until: desktop) {\n      margin-bottom: nhsuk-spacing(6);\n    }\n\n    + h2,\n    + .nhsuk-heading-l,\n    + h3,\n    + .nhsuk-heading-m {\n      padding-top: 0; // [4]\n    }\n  }\n\n  .nhsuk-card-group__item {\n    margin-bottom: 0;\n    list-style-type: none;\n\n    @include nhsuk-flex-item;\n\n    .nhsuk-card {\n      margin-bottom: nhsuk-spacing(5);\n    }\n\n    @include nhsuk-media-query($until: desktop) {\n      .nhsuk-card {\n        margin-bottom: nhsuk-spacing(3);\n      }\n\n      &:last-child .nhsuk-card {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  // Card feature\n\n  .nhsuk-card--feature {\n    @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n  }\n\n  .nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__heading--feature {\n    @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);\n  }\n\n  .nhsuk-card--feature > .nhsuk-card__heading-container,\n  .nhsuk-card--feature > .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--feature {\n    padding: 0; // [7]\n  }\n\n  // Care card\n\n  .nhsuk-card--care {\n    @include nhsuk-care-card($nhsuk-brand-colour, $nhsuk-reverse-text-colour, 4px); // [8]\n    @include nhsuk-responsive-margin(7, \"top\");\n  }\n\n  .nhsuk-card--care > .nhsuk-card__heading-container,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading-container {\n    position: relative;\n    padding-top: nhsuk-spacing(3);\n    padding-bottom: nhsuk-spacing(3) - 1px;\n    border-bottom: 1px solid transparent;\n  }\n\n  .nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card--care__heading {\n    margin: 0;\n    padding-top: 0; // [13]\n\n    @include nhsuk-font(26, $weight: bold);\n    @include nhsuk-print-colour;\n  }\n\n  .nhsuk-card--care__arrow {\n    display: block;\n\n    position: absolute;\n    bottom: -11px; // [9]\n    left: 30px; // [10]\n\n    width: 20px; // [9]\n    height: 20px; // [9]\n\n    overflow: hidden;\n\n    transform: rotate(45deg);\n    @include nhsuk-print-hide;\n\n    @include nhsuk-media-query($from: tablet) {\n      left: 38px; // [10]\n    }\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      display: block;\n\n      position: absolute;\n      top: 0;\n\n      width: 0;\n      height: 0;\n\n      transform: rotate(45deg); // [12]\n\n      border: solid 32px $nhsuk-brand-colour; // [9]\n    }\n  }\n\n  .nhsuk-card--care .nhsuk-card__content {\n    @include nhsuk-responsive-padding(5, \"top\");\n  }\n\n  .nhsuk-card--care--urgent {\n    @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 6px);\n\n    .nhsuk-card--care__arrow {\n      &::before,\n      &::after {\n        border-color: nhsuk-colour(\"red\");\n      }\n    }\n  }\n\n  .nhsuk-card--care--emergency {\n    @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 8px);\n\n    .nhsuk-card--care__arrow {\n      &::before,\n      &::after {\n        border-color: nhsuk-colour(\"red\");\n      }\n    }\n\n    .nhsuk-card__content {\n      position: static; // [15]\n      border: 0;\n      color: $nhsuk-reverse-text-colour;\n      background-color: nhsuk-colour(\"black\");\n\n      a:not(.nhsuk-action-link):not(.nhsuk-button) {\n        @include nhsuk-link-style-white;\n      }\n\n      @include nhsuk-print-colour {\n        background-color: $nhsuk-card-background-colour;\n      }\n    }\n\n    .nhsuk-details,\n    .nhsuk-details__summary {\n      color: $nhsuk-reverse-text-colour;\n    }\n\n    .nhsuk-details__summary {\n      &:hover {\n        color: $nhsuk-reverse-text-colour;\n      }\n\n      &:focus {\n        color: $nhsuk-focus-text-colour;\n      }\n    }\n\n    .nhsuk-action-link__link .nhsuk-icon {\n      fill: $nhsuk-reverse-text-colour; // [14]\n    }\n  }\n\n  // Card primary\n\n  .nhsuk-card--primary > .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--primary {\n    @include nhsuk-responsive-spacing(5, \"padding\", $direction: \"right\", $adjustment: nhsuk-spacing(7));\n\n    @include nhsuk-media-query($from: desktop) {\n      height: 100%;\n    }\n  }\n\n  .nhsuk-card--primary,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--primary {\n    .nhsuk-icon {\n      display: block;\n\n      position: absolute;\n      top: 50%;\n\n      width: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      height: nhsuk-px-to-rem($nhsuk-icon-size-large);\n      margin-top: math.floor(math.div($nhsuk-icon-size-large, -2));\n\n      pointer-events: none;\n\n      fill: $nhsuk-link-colour;\n      @include nhsuk-responsive-spacing(5, \"right\");\n    }\n  }\n\n  // Card secondary\n\n  .nhsuk-card--secondary {\n    border-top: 0;\n    border-right: 0;\n    border-bottom: $nhsuk-card-border-bottom-width solid $nhsuk-card-border-colour;\n    border-left: 0;\n    background: transparent;\n  }\n\n  .nhsuk-card--secondary > .nhsuk-card__heading-container,\n  .nhsuk-card--secondary > .nhsuk-card__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-card__content--secondary {\n    padding-top: 0;\n    padding-right: 0;\n    padding-left: 0;\n  }\n}\n"]}

package/dist/nhsuk/components/card/fixtures.json

@@ -36,6 +36,42 @@
       "options": {},
       "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Help from NHS 111\n    </h3>\n    <p class=\"nhsuk-body\">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>\n<p class=\"nhsuk-body\">Go to <a href=\"#\">111.nhs.uk</a> or <a href=\"#\">call 111</a>.</p>\n<p class=\"nhsuk-body\">For a life-threatening emergency call 999.</p>\n  </div>\n</div>"
     },
+    {
+      "name": "basic with heading link",
+      "context": {
+        "heading": "Introduction to care and support",
+        "headingClasses": "nhsuk-heading-m",
+        "headingLevel": 3,
+        "href": "#",
+        "description": "A quick guide for people who have care and support needs and their carers"
+      },
+      "screenshot": false,
+      "options": {},
+      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      <a class=\"nhsuk-card__link\" href=\"#\">Introduction to care and support</a>\n    </h3>\n    <p class=\"nhsuk-card__description\">A quick guide for people who have care and support needs and their carers</p>\n  </div>\n</div>"
+    },
+    {
+      "name": "basic with summary list",
+      "context": {
+        "heading": "Regional Manager",
+        "headingLevel": 3
+      },
+      "callBlock": "<dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n  </div>\n</dl>\n",
+      "screenshot": false,
+      "options": {},
+      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      Regional Manager\n    </h3>\n    <dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n  </div>\n</dl>\n  </div>\n</div>"
+    },
+    {
+      "name": "basic with summary list and heading link",
+      "context": {
+        "heading": "Regional Manager",
+        "headingLevel": 3,
+        "href": "#"
+      },
+      "callBlock": "<dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n  </div>\n</dl>\n",
+      "screenshot": false,
+      "options": {},
+      "html": "<div class=\"nhsuk-card\">\n  <div class=\"nhsuk-card__content\">\n    <h3 class=\"nhsuk-card__heading\">\n      <a class=\"nhsuk-card__link\" href=\"#\">Regional Manager</a>\n    </h3>\n    <dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n  </div>\n</dl>\n  </div>\n</div>"
+    },
     {
       "name": "clickable",
       "context": {
@@ -89,9 +125,7 @@
       "name": "feature",
       "context": {
         "feature": true,
-        "href": "#",
         "heading": "Feature card heading",
-        "headingClasses": "nhsuk-heading-m",
         "description": "Feature card description."
       },
       "screenshot": {
@@ -102,7 +136,29 @@
         ]
       },
       "options": {},
-      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading nhsuk-heading-m\">\n      Feature card heading\n    </h2>\n    <p class=\"nhsuk-card__description\">Feature card description.</p>\n  </div>\n</div>"
+      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading\">\n      Feature card heading\n    </h2>\n    <p class=\"nhsuk-card__description\">Feature card description.</p>\n  </div>\n</div>"
+    },
+    {
+      "name": "feature with nested card and summary list",
+      "context": {
+        "feature": true,
+        "heading": "Flu: Follow-up requested"
+      },
+      "callBlock": "<p>Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.</p>\n<a class=\"nhsuk-button nhsuk-button--secondary\" href=\"#\">Record a new consent response</a>\n\n<h3 class=\"nhsuk-heading-s\">Consent responses</h3>\n\n<div class=\"nhsuk-card nhsuk-card--clickable\">\n  <div class=\"nhsuk-card__content\">\n    <h4 class=\"nhsuk-card__heading\">\n      <a class=\"nhsuk-card__link\" href=\"#\">Sarah Philips (Mum)</a>\n    </h4>\n    <dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Email address\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      sarah.philips@example.com\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      25 August 2025 at 4:04 pm\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Response\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      <strong class=\"nhsuk-tag nhsuk-tag--orange\">\n        Follow up requested\n      </strong>\n    </dd>\n  </div>\n</dl>\n  </div>\n</div>\n",
+      "screenshot": false,
+      "options": {},
+      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading\">\n      Flu: Follow-up requested\n    </h2>\n    <p>Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.</p>\n<a class=\"nhsuk-button nhsuk-button--secondary\" href=\"#\">Record a new consent response</a>\n\n<h3 class=\"nhsuk-heading-s\">Consent responses</h3>\n\n<div class=\"nhsuk-card nhsuk-card--clickable\">\n  <div class=\"nhsuk-card__content\">\n    <h4 class=\"nhsuk-card__heading\">\n      <a class=\"nhsuk-card__link\" href=\"#\">Sarah Philips (Mum)</a>\n    </h4>\n    <dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Email address\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      sarah.philips@example.com\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      25 August 2025 at 4:04 pm\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Response\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      <strong class=\"nhsuk-tag nhsuk-tag--orange\">\n        Follow up requested\n      </strong>\n    </dd>\n  </div>\n</dl>\n  </div>\n</div>\n  </div>\n</div>"
+    },
+    {
+      "name": "feature with summary list",
+      "context": {
+        "feature": true,
+        "heading": "Feature card heading"
+      },
+      "callBlock": "<dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n  </div>\n</dl>\n",
+      "screenshot": false,
+      "options": {},
+      "html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading\">\n      Feature card heading\n    </h2>\n    <dl class=\"nhsuk-summary-list\">\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Name\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      Karen Francis\n    </dd>\n  </div>\n  <div class=\"nhsuk-summary-list__row\">\n    <dt class=\"nhsuk-summary-list__key\">\n      Date of birth\n    </dt>\n    <dd class=\"nhsuk-summary-list__value\">\n      15 March 1984\n    </dd>\n  </div>\n</dl>\n  </div>\n</div>"
     },
     {
       "name": "primary (with chevron)",
@@ -170,7 +226,7 @@
         "secondary": true,
         "heading": "Why we are reinvesting in the NHS Prototype kit",
         "headingClasses": "nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2",
-        "descriptionHtml": "<p class=\"nhsuk-body-s nhsuk-u-margin-bottom-2\">21 July 2025</p><p class=\"nhsuk-card__description\">Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>"
+        "descriptionHtml": "<p class=\"nhsuk-body-s nhsuk-u-margin-bottom-2\">21 July 2025</p>\n<p class=\"nhsuk-card__description\">Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>"
       },
       "screenshot": {
         "viewports": [
@@ -180,7 +236,7 @@
         ]
       },
       "options": {},
-      "html": "<div class=\"nhsuk-card nhsuk-card--secondary\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2\">\n      <a class=\"nhsuk-card__link\" href=\"#\">Why we are reinvesting in the NHS Prototype kit</a>\n    </h2>\n    <p class=\"nhsuk-body-s nhsuk-u-margin-bottom-2\">21 July 2025</p><p class=\"nhsuk-card__description\">Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>\n  </div>\n</div>"
+      "html": "<div class=\"nhsuk-card nhsuk-card--secondary\">\n  <div class=\"nhsuk-card__content\">\n    <h2 class=\"nhsuk-card__heading nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2\">\n      <a class=\"nhsuk-card__link\" href=\"#\">Why we are reinvesting in the NHS Prototype kit</a>\n    </h2>\n    <p class=\"nhsuk-body-s nhsuk-u-margin-bottom-2\">21 July 2025</p>\n    <p class=\"nhsuk-card__description\">Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>\n  </div>\n</div>"
     },
     {
       "name": "top task",

package/dist/nhsuk/components/summary-list/_index.scss

@@ -183,6 +183,23 @@
       }
     }
   }
+
+  .nhsuk-card__content {
+    .nhsuk-summary-list {
+      margin-bottom: 0;
+    }
+
+    .nhsuk-summary-list__row:last-of-type {
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+
+    .nhsuk-summary-list__row:last-of-type > :last-child {
+      @include nhsuk-media-query($until: tablet) {
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 
 /*# sourceMappingURL=_index.scss.map */

package/dist/nhsuk/components/summary-list/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/nhsuk/components/summary-list/_index.scss"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,4BAA4B;;AAE5B,GAAG;AACH,yBAAyB;AACzB,EAAE;AACF,uDAAuD;AACvD,qCAAqC;AACrC,yDAAyD;AACzD,EAAE;AACF,iCAAiC;AACjC,6GAA6G;AAC7G,GAAG;;AAEH;EACE;IACE,SAAS,EAAE,KAAK;;IAEhB,8BAA8B;IAC9B,6CAA6C;;IAE7C;MACE,cAAc;MACd,WAAW;MACX,mBAAmB,EAAE,KAAK;MAC1B,yBAAyB;IAC3B;EACF;;EAEA;IACE,6CAA6C;;IAE7C;MACE,+BAA+B;IACjC;IACA;MACE,kBAAkB;IACpB;EACF;;EAEA,sDAAsD;EACtD;IACE,gBAAgB;EAClB;;EAEA,0EAA0E;EAC1E,uEAAuE;EACvE;IACE;MACE;QACE,WAAW;QACX,mBAAmB;QACnB,UAAU;MACZ;IACF;EACF;;EAEA;;;IAGE,sBAAsB;IACtB,SAAS,EAAE,KAAK;IAChB,mBAAmB;;IAEnB;MACE,mBAAmB;MACnB,6BAA6B;MAC7B,+BAA+B;MAC/B,gCAAgC;IAClC;EACF;;EAEA;IACE,+BAA+B;;IAE/B;MACE,UAAU;MACV,iBAAiB;IACnB;EACF;;EAEA;;IAEE,8BAA8B,EAAE,KAAK;EACvC;;EAEA;IACE,+BAA+B;;IAE/B,qCAAqC;;IAErC;MACE,UAAU;IACZ;EACF;;EAEA;IACE;MACE,+BAA+B;IACjC;EACF;;EAEA;IACE,mBAAmB;EACrB;;EAEA;IACE,gBAAgB;EAClB;;EAEA;IACE,WAAW;IACX,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;EACnB;;EAEA;IACE,qBAAqB;;IAErB;MACE,8BAA8B;MAC9B,+BAA+B;MAC/B,4CAA4C;;MAE5C;QACE,eAAe;QACf,gBAAgB;QAChB,SAAS;MACX;IACF;;IAEA;MACE,6BAA6B;MAC7B,8BAA8B;;MAE9B;QACE,cAAc;QACd,eAAe;QACf,SAAS;MACX;;MAEA;QACE,2CAA2C;MAC7C;IACF;EACF;;EAEA,6EAA6E;EAC7E,wEAAwE;EACxE,4EAA4E;EAC5E,4EAA4E;EAC5E,4CAA4C;EAC5C;IACE,kBAAkB;EACpB;;EAEA,kCAAkC;EAClC;IACE;MACE,SAAS;IACX;;IAEA,4DAA4D;IAC5D;MACE;;;QAGE,sCAAsC;MACxC;IACF;EACF;;EAEA,4BAA4B;EAC5B;IACE,SAAS;;IAET,4DAA4D;IAC5D;MACE;;;QAGE,sCAAsC;MACxC;IACF;EACF;AACF","file":"_index.scss","sourcesContent":["@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n\n////\n/// Summary list component\n///\n/// 1. Required to allow us to wrap words that overflow.\n/// 2. Reset default user agent styles\n/// 3. Automatic wrapping for unbreakable text (e.g. URLs)\n///\n/// @group components/summary-list\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n////\n\n@include nhsuk-exports(\"nhsuk/components/summary-list\") {\n  .nhsuk-summary-list {\n    margin: 0; // [2]\n\n    @include nhsuk-font($size: 19);\n    @include nhsuk-responsive-margin(6, \"bottom\");\n\n    @include nhsuk-media-query($from: tablet) {\n      display: table;\n      width: 100%;\n      table-layout: fixed; // [1]\n      border-collapse: collapse;\n    }\n  }\n\n  .nhsuk-summary-list__row {\n    border-bottom: 1px solid $nhsuk-border-colour;\n\n    @include nhsuk-media-query($until: tablet) {\n      margin-bottom: nhsuk-spacing(3);\n    }\n    @include nhsuk-media-query($from: tablet) {\n      display: table-row;\n    }\n  }\n\n  // Remove right padding from the last column in the row\n  .nhsuk-summary-list__row:not(.nhsuk-summary-list__row--no-actions) > :last-child {\n    padding-right: 0;\n  }\n\n  // Provide an empty 'cell' for rows that don't have actions – otherwise the\n  // bottom border is not drawn for that part of the row in some browsers.\n  .nhsuk-summary-list__row--no-actions {\n    @include nhsuk-media-query($from: tablet) {\n      &::after {\n        content: \"\";\n        display: table-cell;\n        width: 20%;\n      }\n    }\n  }\n\n  .nhsuk-summary-list__key,\n  .nhsuk-summary-list__value,\n  .nhsuk-summary-list__actions {\n    box-sizing: border-box;\n    margin: 0; // [2]\n    vertical-align: top;\n\n    @include nhsuk-media-query($from: tablet) {\n      display: table-cell;\n      padding-top: nhsuk-spacing(2);\n      padding-right: nhsuk-spacing(4);\n      padding-bottom: nhsuk-spacing(2);\n    }\n  }\n\n  .nhsuk-summary-list__actions {\n    margin-bottom: nhsuk-spacing(3);\n\n    @include nhsuk-media-query($from: tablet) {\n      width: 20%;\n      text-align: right;\n    }\n  }\n\n  .nhsuk-summary-list__key,\n  .nhsuk-summary-list__value {\n    @include nhsuk-text-break-word; // [3]\n  }\n\n  .nhsuk-summary-list__key {\n    margin-bottom: nhsuk-spacing(1);\n\n    @include nhsuk-typography-weight-bold;\n\n    @include nhsuk-media-query($from: tablet) {\n      width: 30%;\n    }\n  }\n\n  .nhsuk-summary-list__value {\n    @include nhsuk-media-query($until: tablet) {\n      margin-bottom: nhsuk-spacing(3);\n    }\n  }\n\n  .nhsuk-summary-list__value > p {\n    margin-bottom: 12px;\n  }\n\n  .nhsuk-summary-list__value > :last-child {\n    margin-bottom: 0;\n  }\n\n  .nhsuk-summary-list__actions-list {\n    width: 100%;\n    margin: 0; // [2]\n    padding: 0; // [2]\n  }\n\n  .nhsuk-summary-list__actions-list-item {\n    display: inline-block;\n\n    @include nhsuk-media-query($until: tablet) {\n      margin-right: nhsuk-spacing(2);\n      padding-right: nhsuk-spacing(2);\n      border-right: 1px solid $nhsuk-border-colour;\n\n      &:last-child {\n        margin-right: 0;\n        padding-right: 0;\n        border: 0;\n      }\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      margin-left: nhsuk-spacing(2);\n      padding-left: nhsuk-spacing(2);\n\n      &:first-child {\n        margin-left: 0;\n        padding-left: 0;\n        border: 0;\n      }\n\n      &:not(:first-child) {\n        border-left: 1px solid $nhsuk-border-colour;\n      }\n    }\n  }\n\n  // Large groups of action links may wrap onto multiple lines. Because the link\n  // focus styles are applied outside of the link's bounding box, there are\n  // situations where the focus style on a link can be overlapped by subsequent\n  // links. We don't want this, so let's create a new stacking context on focus\n  // so the link always appears to be 'on top'.\n  .nhsuk-summary-list__actions-list-item .nhsuk-link:focus {\n    isolation: isolate;\n  }\n\n  // No border on entire summary list\n  .nhsuk-summary-list--no-border {\n    .nhsuk-summary-list__row {\n      border: 0;\n    }\n\n    // Increase padding by 1px to compensate for 'missing' border\n    @include nhsuk-media-query($from: tablet) {\n      .nhsuk-summary-list__key,\n      .nhsuk-summary-list__value,\n      .nhsuk-summary-list__actions {\n        padding-bottom: nhsuk-spacing(2) + 1px;\n      }\n    }\n  }\n\n  // No border on specific rows\n  .nhsuk-summary-list__row--no-border {\n    border: 0;\n\n    // Increase padding by 1px to compensate for 'missing' border\n    @include nhsuk-media-query($from: tablet) {\n      .nhsuk-summary-list__key,\n      .nhsuk-summary-list__value,\n      .nhsuk-summary-list__actions {\n        padding-bottom: nhsuk-spacing(2) + 1px;\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/nhsuk/components/summary-list/_index.scss"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,4BAA4B;;AAE5B,GAAG;AACH,yBAAyB;AACzB,EAAE;AACF,uDAAuD;AACvD,qCAAqC;AACrC,yDAAyD;AACzD,EAAE;AACF,iCAAiC;AACjC,6GAA6G;AAC7G,GAAG;;AAEH;EACE;IACE,SAAS,EAAE,KAAK;;IAEhB,8BAA8B;IAC9B,6CAA6C;;IAE7C;MACE,cAAc;MACd,WAAW;MACX,mBAAmB,EAAE,KAAK;MAC1B,yBAAyB;IAC3B;EACF;;EAEA;IACE,6CAA6C;;IAE7C;MACE,+BAA+B;IACjC;IACA;MACE,kBAAkB;IACpB;EACF;;EAEA,sDAAsD;EACtD;IACE,gBAAgB;EAClB;;EAEA,0EAA0E;EAC1E,uEAAuE;EACvE;IACE;MACE;QACE,WAAW;QACX,mBAAmB;QACnB,UAAU;MACZ;IACF;EACF;;EAEA;;;IAGE,sBAAsB;IACtB,SAAS,EAAE,KAAK;IAChB,mBAAmB;;IAEnB;MACE,mBAAmB;MACnB,6BAA6B;MAC7B,+BAA+B;MAC/B,gCAAgC;IAClC;EACF;;EAEA;IACE,+BAA+B;;IAE/B;MACE,UAAU;MACV,iBAAiB;IACnB;EACF;;EAEA;;IAEE,8BAA8B,EAAE,KAAK;EACvC;;EAEA;IACE,+BAA+B;;IAE/B,qCAAqC;;IAErC;MACE,UAAU;IACZ;EACF;;EAEA;IACE;MACE,+BAA+B;IACjC;EACF;;EAEA;IACE,mBAAmB;EACrB;;EAEA;IACE,gBAAgB;EAClB;;EAEA;IACE,WAAW;IACX,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;EACnB;;EAEA;IACE,qBAAqB;;IAErB;MACE,8BAA8B;MAC9B,+BAA+B;MAC/B,4CAA4C;;MAE5C;QACE,eAAe;QACf,gBAAgB;QAChB,SAAS;MACX;IACF;;IAEA;MACE,6BAA6B;MAC7B,8BAA8B;;MAE9B;QACE,cAAc;QACd,eAAe;QACf,SAAS;MACX;;MAEA;QACE,2CAA2C;MAC7C;IACF;EACF;;EAEA,6EAA6E;EAC7E,wEAAwE;EACxE,4EAA4E;EAC5E,4EAA4E;EAC5E,4CAA4C;EAC5C;IACE,kBAAkB;EACpB;;EAEA,kCAAkC;EAClC;IACE;MACE,SAAS;IACX;;IAEA,4DAA4D;IAC5D;MACE;;;QAGE,sCAAsC;MACxC;IACF;EACF;;EAEA,4BAA4B;EAC5B;IACE,SAAS;;IAET,4DAA4D;IAC5D;MACE;;;QAGE,sCAAsC;MACxC;IACF;EACF;;EAEA;IACE;MACE,gBAAgB;IAClB;;IAEA;MACE,gBAAgB;MAChB,mBAAmB;IACrB;;IAEA;MACE;QACE,gBAAgB;MAClB;IACF;EACF;AACF","file":"_index.scss","sourcesContent":["@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n\n////\n/// Summary list component\n///\n/// 1. Required to allow us to wrap words that overflow.\n/// 2. Reset default user agent styles\n/// 3. Automatic wrapping for unbreakable text (e.g. URLs)\n///\n/// @group components/summary-list\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n////\n\n@include nhsuk-exports(\"nhsuk/components/summary-list\") {\n  .nhsuk-summary-list {\n    margin: 0; // [2]\n\n    @include nhsuk-font($size: 19);\n    @include nhsuk-responsive-margin(6, \"bottom\");\n\n    @include nhsuk-media-query($from: tablet) {\n      display: table;\n      width: 100%;\n      table-layout: fixed; // [1]\n      border-collapse: collapse;\n    }\n  }\n\n  .nhsuk-summary-list__row {\n    border-bottom: 1px solid $nhsuk-border-colour;\n\n    @include nhsuk-media-query($until: tablet) {\n      margin-bottom: nhsuk-spacing(3);\n    }\n    @include nhsuk-media-query($from: tablet) {\n      display: table-row;\n    }\n  }\n\n  // Remove right padding from the last column in the row\n  .nhsuk-summary-list__row:not(.nhsuk-summary-list__row--no-actions) > :last-child {\n    padding-right: 0;\n  }\n\n  // Provide an empty 'cell' for rows that don't have actions – otherwise the\n  // bottom border is not drawn for that part of the row in some browsers.\n  .nhsuk-summary-list__row--no-actions {\n    @include nhsuk-media-query($from: tablet) {\n      &::after {\n        content: \"\";\n        display: table-cell;\n        width: 20%;\n      }\n    }\n  }\n\n  .nhsuk-summary-list__key,\n  .nhsuk-summary-list__value,\n  .nhsuk-summary-list__actions {\n    box-sizing: border-box;\n    margin: 0; // [2]\n    vertical-align: top;\n\n    @include nhsuk-media-query($from: tablet) {\n      display: table-cell;\n      padding-top: nhsuk-spacing(2);\n      padding-right: nhsuk-spacing(4);\n      padding-bottom: nhsuk-spacing(2);\n    }\n  }\n\n  .nhsuk-summary-list__actions {\n    margin-bottom: nhsuk-spacing(3);\n\n    @include nhsuk-media-query($from: tablet) {\n      width: 20%;\n      text-align: right;\n    }\n  }\n\n  .nhsuk-summary-list__key,\n  .nhsuk-summary-list__value {\n    @include nhsuk-text-break-word; // [3]\n  }\n\n  .nhsuk-summary-list__key {\n    margin-bottom: nhsuk-spacing(1);\n\n    @include nhsuk-typography-weight-bold;\n\n    @include nhsuk-media-query($from: tablet) {\n      width: 30%;\n    }\n  }\n\n  .nhsuk-summary-list__value {\n    @include nhsuk-media-query($until: tablet) {\n      margin-bottom: nhsuk-spacing(3);\n    }\n  }\n\n  .nhsuk-summary-list__value > p {\n    margin-bottom: 12px;\n  }\n\n  .nhsuk-summary-list__value > :last-child {\n    margin-bottom: 0;\n  }\n\n  .nhsuk-summary-list__actions-list {\n    width: 100%;\n    margin: 0; // [2]\n    padding: 0; // [2]\n  }\n\n  .nhsuk-summary-list__actions-list-item {\n    display: inline-block;\n\n    @include nhsuk-media-query($until: tablet) {\n      margin-right: nhsuk-spacing(2);\n      padding-right: nhsuk-spacing(2);\n      border-right: 1px solid $nhsuk-border-colour;\n\n      &:last-child {\n        margin-right: 0;\n        padding-right: 0;\n        border: 0;\n      }\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      margin-left: nhsuk-spacing(2);\n      padding-left: nhsuk-spacing(2);\n\n      &:first-child {\n        margin-left: 0;\n        padding-left: 0;\n        border: 0;\n      }\n\n      &:not(:first-child) {\n        border-left: 1px solid $nhsuk-border-colour;\n      }\n    }\n  }\n\n  // Large groups of action links may wrap onto multiple lines. Because the link\n  // focus styles are applied outside of the link's bounding box, there are\n  // situations where the focus style on a link can be overlapped by subsequent\n  // links. We don't want this, so let's create a new stacking context on focus\n  // so the link always appears to be 'on top'.\n  .nhsuk-summary-list__actions-list-item .nhsuk-link:focus {\n    isolation: isolate;\n  }\n\n  // No border on entire summary list\n  .nhsuk-summary-list--no-border {\n    .nhsuk-summary-list__row {\n      border: 0;\n    }\n\n    // Increase padding by 1px to compensate for 'missing' border\n    @include nhsuk-media-query($from: tablet) {\n      .nhsuk-summary-list__key,\n      .nhsuk-summary-list__value,\n      .nhsuk-summary-list__actions {\n        padding-bottom: nhsuk-spacing(2) + 1px;\n      }\n    }\n  }\n\n  // No border on specific rows\n  .nhsuk-summary-list__row--no-border {\n    border: 0;\n\n    // Increase padding by 1px to compensate for 'missing' border\n    @include nhsuk-media-query($from: tablet) {\n      .nhsuk-summary-list__key,\n      .nhsuk-summary-list__value,\n      .nhsuk-summary-list__actions {\n        padding-bottom: nhsuk-spacing(2) + 1px;\n      }\n    }\n  }\n\n  .nhsuk-card__content {\n    .nhsuk-summary-list {\n      margin-bottom: 0;\n    }\n\n    .nhsuk-summary-list__row:last-of-type {\n      margin-bottom: 0;\n      border-bottom: none;\n    }\n\n    .nhsuk-summary-list__row:last-of-type > :last-child {\n      @include nhsuk-media-query($until: tablet) {\n        margin-bottom: 0;\n      }\n    }\n  }\n}\n"]}

package/dist/nhsuk/core/_nhsuk-frontend-properties.scss

@@ -7,7 +7,7 @@
 :root {
   // This variable is automatically overwritten during builds and releases.
   // It doesn't need to be updated manually.
-  --nhsuk-frontend-version: "10.2.0";
+  --nhsuk-frontend-version: "10.2.1";
 
   // CSS custom property for each breakpoint
   @each $name, $value in $nhsuk-breakpoints {

package/dist/nhsuk/nhsuk-frontend.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 :root {
-  --nhsuk-frontend-version: "10.2.0";
+  --nhsuk-frontend-version: "10.2.1";
   --nhsuk-breakpoint-mobile: 20rem;
   --nhsuk-breakpoint-tablet: 40.0625rem;
   --nhsuk-breakpoint-desktop: 48.0625rem;
@@ -4245,7 +4245,7 @@ b {
   }
 }
 
-.nhsuk-card--feature .nhsuk-card__heading,
+.nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,
 .nhsuk-card__heading--feature {
   display: inline-block;
   position: relative;
@@ -4259,27 +4259,27 @@ b {
   color: #ffffff;
   background-color: #005eb8;
 }
-.nhsuk-card--feature .nhsuk-card__heading,
+.nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,
 .nhsuk-card__heading--feature {
   font-size: 1.375rem;
   line-height: 1.31818;
 }
 @media (min-width: 40.0625em) {
-  .nhsuk-card--feature .nhsuk-card__heading,
+  .nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,
   .nhsuk-card__heading--feature {
     font-size: 1.625rem;
     line-height: 1.23077;
   }
 }
 @media print {
-  .nhsuk-card--feature .nhsuk-card__heading,
+  .nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,
   .nhsuk-card__heading--feature {
     font-size: 17pt;
     line-height: 1.25;
   }
 }
 @media (max-width: 40.0525em) {
-  .nhsuk-card--feature .nhsuk-card__heading,
+  .nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,
   .nhsuk-card__heading--feature {
     top: -8px;
     margin-left: -25px;
@@ -4287,7 +4287,7 @@ b {
   }
 }
 @media print {
-  .nhsuk-card--feature .nhsuk-card__heading,
+  .nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,
   .nhsuk-card__heading--feature {
     color: #000000;
     top: 0;
@@ -4295,8 +4295,8 @@ b {
   }
 }
 
-.nhsuk-card--feature .nhsuk-card__heading-container,
-.nhsuk-card--feature .nhsuk-card__content,
+.nhsuk-card--feature > .nhsuk-card__heading-container,
+.nhsuk-card--feature > .nhsuk-card__content,
 .nhsuk-card__content--feature {
   padding: 0;
 }
@@ -4322,7 +4322,7 @@ b {
   }
 }
 
-.nhsuk-card--care .nhsuk-card__heading-container,
+.nhsuk-card--care > .nhsuk-card__heading-container,
 .nhsuk-card--care__heading-container {
   position: relative;
   padding-top: 16px;
@@ -4330,36 +4330,36 @@ b {
   border-bottom: 1px solid transparent;
 }
 
-.nhsuk-card--care .nhsuk-card__heading,
+.nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,
 .nhsuk-card--care__heading {
   margin: 0;
   padding-top: 0;
 }
-.nhsuk-card--care .nhsuk-card__heading,
+.nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,
 .nhsuk-card--care__heading {
   font-weight: 600;
 }
-.nhsuk-card--care .nhsuk-card__heading,
+.nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,
 .nhsuk-card--care__heading {
   font-size: 1.375rem;
   line-height: 1.31818;
 }
 @media (min-width: 40.0625em) {
-  .nhsuk-card--care .nhsuk-card__heading,
+  .nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,
   .nhsuk-card--care__heading {
     font-size: 1.625rem;
     line-height: 1.23077;
   }
 }
 @media print {
-  .nhsuk-card--care .nhsuk-card__heading,
+  .nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,
   .nhsuk-card--care__heading {
     font-size: 17pt;
     line-height: 1.25;
   }
 }
 @media print {
-  .nhsuk-card--care .nhsuk-card__heading,
+  .nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,
   .nhsuk-card--care__heading {
     color: #000000;
   }
@@ -4506,18 +4506,18 @@ b {
   fill: #ffffff;
 }
 
-.nhsuk-card--primary .nhsuk-card__content,
+.nhsuk-card--primary > .nhsuk-card__content,
 .nhsuk-card__content--primary {
   padding-right: 72px;
 }
 @media (min-width: 40.0625em) {
-  .nhsuk-card--primary .nhsuk-card__content,
+  .nhsuk-card--primary > .nhsuk-card__content,
   .nhsuk-card__content--primary {
     padding-right: 80px;
   }
 }
 @media (min-width: 48.0625em) {
-  .nhsuk-card--primary .nhsuk-card__content,
+  .nhsuk-card--primary > .nhsuk-card__content,
   .nhsuk-card__content--primary {
     height: 100%;
   }
@@ -4553,8 +4553,8 @@ b {
   background: transparent;
 }
 
-.nhsuk-card--secondary .nhsuk-card__heading-container,
-.nhsuk-card--secondary .nhsuk-card__content,
+.nhsuk-card--secondary > .nhsuk-card__heading-container,
+.nhsuk-card--secondary > .nhsuk-card__content,
 .nhsuk-card__content--secondary {
   padding-top: 0;
   padding-right: 0;
@@ -8513,6 +8513,19 @@ b {
   }
 }
 
+.nhsuk-card__content .nhsuk-summary-list {
+  margin-bottom: 0;
+}
+.nhsuk-card__content .nhsuk-summary-list__row:last-of-type {
+  margin-bottom: 0;
+  border-bottom: none;
+}
+@media (max-width: 40.0525em) {
+  .nhsuk-card__content .nhsuk-summary-list__row:last-of-type > :last-child {
+    margin-bottom: 0;
+  }
+}
+
 .nhsuk-table-container {
   box-sizing: border-box;
   display: block;