add secondary card links

docs/components/card-links.md

@@ -62,6 +62,16 @@ If a page has a long list of card links, consider breaking them up using heading
 
 {% example "cards/card-group-headings.njk" %}
 
+### Secondary card links
+
+Use secondary card links on hub pages to signpost groups of information on less important topics.
+
+{% example "cards/card-link-secondary.njk" %}
+
+Use them below primary card links which signpost more important information.
+
+{% example "cards/card-link-secondary-stacked.njk" %}
+
 ## Content guidance
 
 Aim to use active phrasing for card link text. This means starting the link text with a verb. For example: "Request repeat prescriptions" and "Check for available GP appointments". This follows content guidance on links and helps users to understand the action they can take.

docs/examples/cards/card-link-secondary-stacked.njk

@@ -0,0 +1,47 @@
+---
+layout: layouts/example.njk
+title: Card link secondary stacked
+figmaLink: ""
+vueLink: ""
+---
+
+{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %}
+{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
+{% from "nhsapp/styles/section-heading/macro.njk" import nhsappSectionHeading %}
+
+{{ nhsappSectionHeading({
+  headingText: "Settings"
+}) }}
+
+{{ nhsappCardGroup({
+  stacked: true,
+  cards: [
+    {
+      title: 'Login and security',
+      href: '#'
+    },
+    {
+      title: 'Face ID',
+      href: '#'
+    }
+  ]
+}) }}
+
+{{ nhsappSectionHeading({
+  headingText: "About the NHS App"
+}) }}
+
+{{ nhsappCardGroup({
+  stacked: true,
+  classes: 'nhsapp-cards--secondary',
+  cards: [
+    {
+      title: 'Privacy and legal policies',
+      href: '#'
+    },
+    {
+      title: 'Join our user research panel',
+      href: '#'
+    }
+  ]
+}) }}

docs/examples/cards/card-link-secondary.njk

@@ -0,0 +1,14 @@
+---
+layout: layouts/example.njk
+title: Card link secondary
+figmaLink: ""
+vueLink: ""
+---
+
+{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
+
+{{ nhsappCard({
+  title: 'Privacy and legal policies',
+  href: '#',
+  classes: 'nhsapp-card--secondary'
+}) }}

src/components/card/_card.scss

@@ -116,6 +116,12 @@ $card-border-hover-color: $color_nhsuk-grey-3;
   }
 }
 
+// secondary card
+.nhsapp-cards--secondary .nhsapp-card,
+.nhsapp-card--secondary {
+  background: transparent;
+}
+
 // card group
 .nhsapp-cards {
   @include nhsuk-responsive-margin(5, "bottom");