<ul class="nhsuk-grid-row">
<li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
<div class="nhsuk-card nhsuk-card--clickable">
<div class="nhsuk-card__content nhsuk-card__content--primary">
<h2 class="nhsuk-card__heading nhsuk-heading-m">
<a class="nhsuk-card__link" href="#">Introduction to care and support</a>
</h2>
<p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers</p>
<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>
</div>
</div>
</li>
</ul>
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
Name | Type | Required | Description |
---|---|---|---|
Name heading | Type string | Required true | Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored. |
Name headingHtml | Type string | Required true | Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored. |
Name headingClasses | Type string | Required false | Description Classes to add to the card heading. |
Name headingLevel | Type integer | Required false | Description Optional heading level for the card heading. Default: 2 |
Name href | Type string | Required false | Description The value of the card link href attribute. |
Name clickable | Type boolean | Required false | Description If set to true, then the whole Card will become a clickable Card variant. |
Name feature | Type boolean | Required false | Description If set to true, then the Card will become a feature Card variant. |
Name imgURL | Type string | Required false | Description The URL of the image in the card. |
Name imgALT | Type string | Required false | Description The alternative text of the image in the card. |
Name description | Type string | Required false | Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored. |
Name descriptionHtml | Type string | Required false | Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored. |
Name classes | Type string | Required false | Description Classes to add to the card. |
Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the card. |
{% from 'card/macro.njk' import card %}
<ul class="nhsuk-grid-row">
<li class="nhsuk-grid-column-two-thirds nhsuk-card-group__item">
{{ card({
"href": "#",
"primary": "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"
}) }}
</li>
</ul>