add secondary card example

nhsuk · Aug 17, 2023 · eec9f1a · eec9f1a
1 parent 7e5bc6c
commit eec9f1a
Showing 1 changed file with 33 additions and 1 deletion.
diff --git a/packages/components/card/README.md b/packages/components/card/README.md
@@ -35,7 +35,7 @@ Find out more about the card component and when to use it in the [NHS digital se
 
 ### Primary card (with chevron)
 
-[Preview the clickable card component](https://nhsuk.github.io/nhsuk-frontend/components/card/primary.html)
+[Preview the primary card component](https://nhsuk.github.io/nhsuk-frontend/components/card/card-primary.html)
 
 #### HTML markup
 
@@ -65,6 +65,38 @@ Find out more about the card component and when to use it in the [NHS digital se
 }) }}
 ```
 
+### Secondary card
+
+[Preview the secondary card component](https://nhsuk.github.io/nhsuk-frontend/components/card/card-secondary.html)
+
+#### HTML markup
+
+```
+<div class="nhsuk-card nhsuk-card--clickable nhsuk-card--secondary">
+  <div class="nhsuk-card__content nhsuk-card__content--secondary">
+    <h2 class="nhsuk-card__heading nhsuk-heading-m">
+        <a class="nhsuk-card__link" href="#">Urgent and emergency care services</a>
+    </h2>
+  <p class="nhsuk-card__description">Services the NHS provides if you need urgent or emergency medical help</p>
+  </div>
+</div>
+```
+
+#### Nunjucks macro
+
+```
+{% from 'components/card/macro.njk' import card %}
+
+    {{ card({
+      "href": "#",
+      "clickable": "true",
+      "secondary": "true",
+      "heading": "Urgent and emergency care services",
+      "headingClasses": "nhsuk-heading-m",
+      "description": "Services the NHS provides if you need urgent or emergency medical help"
+    }) }}
+```
+
 ### Card with an image
 
 [Preview the card with an image component](https://nhsuk.github.io/nhsuk-frontend/components/card/card-with-image.html)