Include summary card component

Not yet in the design system but a useful component:
alphagov/govuk-design-system-backlog#210

app/assets/sass/application.scss

@@ -15,4 +15,7 @@ $govuk-assets-path: '/govuk/assets/';
 @import "patterns/task-list";
 @import "patterns/related-items";
 
+// Components that aren’t in Frontend
+@import "components/summary-card";
+
 // Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you

app/assets/sass/components/_summary-card.scss

@@ -0,0 +1,84 @@
+.app-summary-card {
+  border: 1px solid $govuk-border-colour;
+
+  /* Card header */
+  .app-summary-card__header {
+    align-items: center;
+    background-color: govuk-colour("light-grey");
+    padding: govuk-spacing(3);
+
+    @include govuk-media-query($from: desktop) {
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+    }
+  }
+
+  .app-summary-card__title {
+    @include govuk-font($size: 19);
+    margin: 0;
+  }
+
+  .app-summary-card__meta {
+    @include govuk-font($size: 16);
+    display: block;
+    margin: 0;
+  }
+
+  .app-summary-card__actions {
+    @include govuk-font($size: 19);
+  }
+
+  .app-summary-card__actions-list {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .app-summary-card__actions-list-item {
+    display: block;
+    white-space: nowrap;
+
+    @include govuk-media-query($from: desktop) {
+      display: inline-block;
+      margin-left: govuk-spacing(2);
+      text-align: right;
+    }
+  }
+
+  .app-summary-card__actions-list-item:first-child {
+    margin-left: 0;
+  }
+
+  /* Card body */
+  .app-summary-card__body {
+    @include govuk-font($size: 19);
+    padding: govuk-spacing(3);
+  }
+
+  .govuk-table,
+  .govuk-summary-list,
+  .govuk-table {
+    margin-bottom: 0;
+  }
+
+  .govuk-summary-list__row:last-child,
+  .govuk-summary-list__row:last-child > *,
+  .govuk-table__row:last-child .govuk-table__cell {
+    border-bottom: 0;
+  }
+}
+
+.app-summary-card--large-title .app-summary-card__title {
+  @include govuk-font($size: 24, $weight: bold);
+}
+
+@media print {
+  .app-summary-card__header {
+    break-inside: avoid;
+  }
+
+  .app-summary-card__actions {
+    display: none;
+  }
+}

app/views/_components/summary-card/macro.njk

@@ -0,0 +1,3 @@
+{% macro appSummaryCard(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/views/_components/summary-card/template.njk

@@ -0,0 +1,48 @@
+{%- macro _actionLink(action) %}
+  <a class="govuk-link {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+    {{ action.html | safe if action.html else action.text }}
+    {%- if action.visuallyHiddenText -%}
+      <span class="govuk-visually-hidden"> {{ action.visuallyHiddenText }}</span>
+    {% endif -%}
+  </a>
+{% endmacro -%}
+
+<section class="app-summary-card
+  {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% if params.titleHtml or params.titleText or params.actions %}
+  <header class="app-summary-card__header">
+    {% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
+    <h{{ headingLevel }} class="app-summary-card__title">
+      {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+    </h{{ headingLevel }}>
+    {% if params.actions.items.length %}
+      <div class="app-summary-card__actions">
+        {% if params.actions.items.length == 1 %}
+          {{ _actionLink(params.actions.items[0]) | indent(12) | trim }}
+        {% else %}
+          <ul class="app-summary-card__actions-list">
+          {% for action in params.actions.items %}
+            {% if action %}
+              <li class="app-summary-card__actions-list-item">
+                {{ _actionLink(action) | indent(18) | trim }}
+              </li>
+            {% endif %}
+          {% endfor %}
+          </ul>
+        {% endif %}
+      </div>
+    {% endif %}
+    {% if params.actionsHtml %}
+      <div class="app-summary-card__actions">
+        {{ params.actionsHtml | safe }}
+      </div>
+    {% endif %}
+  </header>
+  {% endif %}
+  {% if params.html or params.text %}
+  <div class="app-summary-card__body">
+    {{ params.html | safe if params.html else params.text }}
+  </div>
+  {% endif %}
+</section>

app/views/layout.html

@@ -31,6 +31,8 @@
 {% from "govuk/components/textarea/macro.njk"            import govukTextarea %}
 {% from "govuk/components/warning-text/macro.njk"        import govukWarningText %}
 
+{% from "_components/summary-card/macro.njk"             import appSummaryCard %}
+
 {% block head %}
   {% include "includes/head.html" %}
 {% endblock %}