add card footer

docs/examples/cards/card-footer.njk

@@ -0,0 +1,17 @@
+---
+layout: layouts/example.njk
+title: Card with footer
+figmaLink: "https://www.figma.com/file/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?type=design&node-id=128%3A7303&mode=design&t=DLiyCHcTTAYkEDa0-1"
+vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhscardbase--docs"
+---
+
+{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
+
+{{ nhsappCard({
+  title: 'Card title',
+  href: '#',
+  html: "
+    <p class='nhsuk-u-margin-top-2'>Card content</p>
+  ",
+  footer: { html: "<p>Card footer content</p>" }
+}) }} 

src/components/card/_card.scss

@@ -55,6 +55,10 @@ $card-border-hover-color: $color_nhsuk-grey-3;
 
   &__content {
     flex-grow: 1;
+
+    :last-child {
+      margin-bottom: 0;
+    }
   }
 
   &__link {
@@ -83,6 +87,21 @@ $card-border-hover-color: $color_nhsuk-grey-3;
       margin-bottom: 0;
     }
   }
+
+  &__footer {
+    border-top: $card-border-width solid $card-border-color;
+    margin: 0 nhsuk-spacing(3);
+    padding: 20px 0;
+
+    @include mq($from: tablet) {
+      margin: 0 nhsuk-spacing(4);
+      padding: nhsuk-spacing(4) 0;
+    }
+
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 // card group

src/components/card/card-group.njk

@@ -15,6 +15,7 @@
       badgeLarge: cardItem.badgeLarge,
       prefixIcon: cardItem.prefixIcon,
       readOnly: cardItem.readOnly,
+      footer: cardItem.footer,
       isListItem: true
     }) }}
   {% endfor %}

src/components/card/card.njk

@@ -48,6 +48,11 @@
       {{ nhsappIcon('chevronRight') }}
     {%- endif -%}
   </div>
+  {%- if params.footer.html -%}
+    <div class="nhsapp-card__footer">
+      {{ params.footer.html | safe }}
+    </div>
+  {%- endif -%}
 {%- if params.isListItem -%}
   </li>
 {%- else -%}