add card link example with description

docs/components/card-links.md

@@ -37,7 +37,7 @@ On pages deeper in the structure of the NHS App, users may need more details to
 
 Only use this variation if you have found a user need for more detailed links on a particular page. A form of this variation is currently used on the “Messages” hub to explain different inboxes to users.
 
-[embed paragraph text example]
+{% example "cards/card-link-with-description.njk" %}
 
 ### Using icons
 

docs/examples/cards/card-link-with-description.njk

@@ -0,0 +1,14 @@
+---
+layout: layouts/example.njk
+title: Card link with description
+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-nhscardlink--docs"
+---
+
+{% from "card/macro.njk" import card %}
+
+{{ card({
+  title: 'Your approved prescriptions',
+  href: '#',
+  description: 'View prescriptions ready for pharmacy to prepare'
+}) }}

docs/examples/cards/card-link.njk

@@ -8,6 +8,6 @@ vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?pat
 {% from "card/macro.njk" import card %}
 
 {{ card({
-  title: 'Title',
+  title: 'Request repeat prescriptions',
   href: '#'
 }) }}

src/components/card/card.njk

@@ -6,7 +6,7 @@
       </a>
       {%- if params.description -%}
         <div class="nhsapp-card__below">
-          <p>{{ params.description }}</p>
+          <p class="nhsuk-u-margin-top-1">{{ params.description }}</p>
         </div>
       {%- endif -%}
     </div>