Card component

app/components/card/card-transparent.njk

@@ -0,0 +1,29 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Card - transparent' %}
+{% from 'components/card/macro.njk' import card %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+<div class="nhsuk-width-container">
+  <main class="nhsuk-main-wrapper" id="maincontent">
+
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-two-thirds">
+
+        {{ card({
+          "href": "#",
+          "clickable": "true",
+          "transparent": "true",
+          "heading": "Introduction to care and support",
+          "headingClasses": "nhsuk-heading-m",
+          "description": "A quick guide for people who have care and support needs and their carers"
+        }) }}
+
+      </div>
+    </div>
+
+  </main>
+</div>
+
+{% endblock %}

app/components/card/card-with-arrow.njk

@@ -0,0 +1,25 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Card - card with an arrow' %}
+{% from 'components/card/macro.njk' import card %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+<div class="nhsuk-width-container">
+  <main class="nhsuk-main-wrapper" id="maincontent">
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-two-thirds">
+        {{ card({
+          "href": "#",
+          "arrow": "true",
+          "clickable": "true",
+          "heading": "Introduction to care and support",
+          "headingClasses": "nhsuk-heading-m",
+          "description": "A quick guide for people who have care and support needs and their carers"
+        }) }}
+      </div>
+    </div>
+  </main>
+</div>
+
+{% endblock %}

app/components/card/top-task-card.njk

@@ -0,0 +1,28 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Card - Clickable card' %}
+{% from 'components/card/macro.njk' import card %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+<div class="nhsuk-width-container">
+  <main class="nhsuk-main-wrapper" id="maincontent">
+
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-two-thirds">
+
+        {{ card({
+          "href": "#",
+          "clickable": "true",
+          "headingLevel": 3,
+          "heading": "Order a repeat prescription",
+          "headingClasses": "nhsuk-heading-m"
+        }) }}
+
+      </div>
+    </div>
+
+  </main>
+</div>
+
+{% endblock %}

app/pages/examples.njk

@@ -36,9 +36,12 @@
     <li><a href="../components/button/reverse.html">Button reverse</a></li>
     <li><a href="../components/card/basic-card.html">Card - Basic card</a></li>
     <li><a href="../components/card/clickable-card.html">Card - Clickable card</a></li>
+    <li><a href="../components/card/card-with-arrow.html">Card - Card with an arrow</a></li>
     <li><a href="../components/card/card-with-image.html">Card - Card with an image</a></li>
     <li><a href="../components/card/card-group.html">Card - Card group</a></li>
     <li><a href="../components/card/feature-card.html">Card - Feature card</a></li>
+    <li><a href="../components/card/card-transparent.html">Card - Transparent card</a></li>
+    <li><a href="../components/card/top-task-card.html">Card - Top task card</a></li>
     <li><a href="../components/card/care-card-non-urgent.html">Card - Care card non-urgent (blue)</a></li>
     <li><a href="../components/card/care-card-urgent.html">Card - Care card urgent (red)</a></li>
     <li><a href="../components/card/care-card-emergency.html">Card - Care card emergency (red and black)</a></li>

packages/components/card/README.md

@@ -534,7 +534,9 @@ The card Nunjucks macro takes the following arguments:
 | **headingLevel**    | integer | No       | Optional heading level for the card heading. Default: 2                                                             |
 | **href**            | string  | No       | The value of the card href attribute                                                                                |
 | **clickable**       | boolean | No       | If set to true, then the class `nhsuk-card--clickable` will be applied.                                             |
+| **arrow**           | boolean | No       | If set to true, then the class `nhsuk-card__content--arrow` will be applied.                                        |
 | **feature**         | boolean | No       | If set to true, then the class `nhsuk-card__heading--feature` and `nhsuk-card__content--feature` will be applied.   |
+| **tranparent**      | boolean | No       | If set to true, then the class `nhsuk-card--transparent` and `nhsuk-card__content--transparent` will be applied.    |
 | **type**            | string  | No       | Care card component variant type - non-urgent, urgent or emergency                                                  |
 | **imgURL**          | string  | No       | The URL of the image in the card                                                                                    |
 | **imgALT**          | string  | No       | The alternative text of the image in the card                                                                       |

packages/components/card/card.scss

@@ -272,3 +272,40 @@ $card-border-hover-color: $color_nhsuk-grey-3;
     }
   }
 }
+
+/* Card with an arrow
+  ========================================================================== */
+
+.nhsuk-card__content--arrow {
+  padding-right: 75px;
+
+  @include mq($from: desktop) {
+    height: 100%;
+  }
+
+  .nhsuk-icon {
+    display: block;
+    fill: $color_nhsuk-blue;
+    margin-top: -nhsuk-spacing(2);
+    position: absolute;
+    right: nhsuk-spacing(4);
+    top: 50%;
+  }
+}
+
+/* Card transparent
+  ========================================================================== */
+
+.nhsuk-card--transparent {
+  background: transparent;
+  border-bottom: $card-border-bottom-width solid $card-border-color;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+}
+
+.nhsuk-card__content--transparent {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+}

packages/components/card/template.njk

@@ -2,15 +2,19 @@
 
 <div class="nhsuk-card
 {%- if params.clickable %} nhsuk-card--clickable{% endif %}
+{%- if params.transparent %} nhsuk-card--transparent{% endif %}
 {%- if params.type %} nhsuk-card--care nhsuk-card--care--{{ params.type }}{% endif %}
 {%- if params.feature %} nhsuk-card--feature{% endif %}
+{%- if params.topTask %} nhsuk-card--top-task{% endif %}
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
 {%- if params.imgURL %}
   <img class="nhsuk-card__img" src="{{ params.imgURL }}" alt="{{ params.imgALT }}">
 {%- endif %}
   <div class="{%- if not params.type %}nhsuk-card__content
               {%- if params.feature %} nhsuk-card__content--feature{% endif %}
+              {%- if params.arrow %} nhsuk-card__content--arrow{% endif %}
+              {%- if params.transparent %} nhsuk-card__content--transparent{% endif %}
               {%- else %}nhsuk-card--care__heading-container{% endif %}">
     {%- if params.headingHtml %}
       {{ params.headingHtml | safe }}
@@ -46,5 +50,8 @@
   <p class="nhsuk-card__description">{{ params.description | safe }}</p>
 {%- else %}
 {%- endif %}
+  {% if params.arrow %} 
+    <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false"><circle cx="13.333" cy="13.333" r="13.333" fill=""/><g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667"><path d="M15.438 13l-3.771 3.771"/><path data-name="Path" d="M11.667 9.229L15.438 13"/></g></svg>
+  {% endif %}
   </div>
 </div>