ComponentCard
50 of 50 upstream examples match.
Razor component: <NhsukCard>
Showing the examples from upstream's review app. Show 1 more test-only examples
Default
If you need help now, but it's not an emergency
Go to NHS 111 online or call 111.
Razor Pages and MVC
<nhsuk-card heading="If you need help now, but it's not an emergency">
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "If you need help now, but it's not an emergency",
})"
>
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "If you need help now, but it's not an emergency"
}
}) %}
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
{% endcall %}Basic with custom HTML
Help from NHS 111
If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.
Go to 111.nhs.uk or call 111.
For a life-threatening emergency call 999.
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "Help from NHS 111",
Level = 3,
})"
>
<p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "Help from NHS 111",
Level = 3,
})"
>
<p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "Help from NHS 111",
"level": 3
}
}) %}
<p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>
{% endcall %}Basic with custom HTML and heading as string
Help from NHS 111
If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.
Go to 111.nhs.uk or call 111.
For a life-threatening emergency call 999.
Razor Pages and MVC
<nhsuk-card heading="Help from NHS 111">
<p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>
</nhsuk-card>Blazor
<NhsukCard Heading="@("Help from NHS 111")">
<p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": "Help from NHS 111"
}) %}
<p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>
{% endcall %}Basic with heading link
Introduction to care and support
A quick guide for people who have care and support needs and their carers
Razor Pages and MVC
<nhsuk-card
href="#"
heading-options="@(new CardHeadingOptions
{
Text = "Introduction to care and support",
Size = "m",
Level = 3,
})"
description="A quick guide for people who have care and support needs and their carers"
/>Blazor
<NhsukCard
Href="#"
Heading="@(new CardHeadingOptions
{
Text = "Introduction to care and support",
Size = "m",
Level = 3,
})"
Description="@("A quick guide for people who have care and support needs and their carers")"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"href": "#",
"heading": {
"text": "Introduction to care and support",
"size": "m",
"level": 3
},
"description": "A quick guide for people who have care and support needs and their carers"
}) }}Basic without heading
A quick guide for people who have care and support needs and their carers
Razor Pages and MVC
<nhsuk-card
description="A quick guide for people who have care and support needs and their carers"
/>Blazor
<NhsukCard
Description="@("A quick guide for people who have care and support needs and their carers")"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"description": "A quick guide for people who have care and support needs and their carers"
}) }}Basic with summary list
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "Regional Manager",
"level": 3
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Basic with summary list and action
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
Actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "Regional Manager",
"level": 3
},
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
}
]
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Basic with summary list and action as a button
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Type = "submit",
Text = "Delete",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
Actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Type = "submit",
Text = "Delete",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "Regional Manager",
"level": 3
},
"actions": {
"items": [
{
"type": "submit",
"text": "Delete"
}
]
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Basic with summary list and actions
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
Actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "Regional Manager",
"level": 3
},
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
},
{
"text": "Withdraw",
"href": "#/withdraw"
}
]
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Basic with summary list and actions array
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
Actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "Regional Manager",
"level": 3
},
"actions": [
{
"text": "Delete",
"href": "#/delete"
},
{
"text": "Withdraw",
"href": "#/withdraw"
}
]
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Basic with summary list and actions as buttons
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Type = "submit",
Text = "Delete",
},
new CardActionsItemsItem
{
Type = "submit",
Text = "Withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
Actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Type = "submit",
Text = "Delete",
},
new CardActionsItemsItem
{
Type = "submit",
Text = "Withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "Regional Manager",
"level": 3
},
"actions": {
"items": [
{
"type": "submit",
"text": "Delete"
},
{
"type": "submit",
"text": "Withdraw"
}
]
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Basic with summary list and actions (empty items)
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
null,
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
Actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
null,
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "Regional Manager",
"level": 3
},
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
},
false
]
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Basic with summary list and actions, without heading
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
VisuallyHiddenText = "(Karen Francis)",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
VisuallyHiddenText = "(Karen Francis)",
Href = "#/withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
VisuallyHiddenText = "(Karen Francis)",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
VisuallyHiddenText = "(Karen Francis)",
Href = "#/withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"actions": {
"items": [
{
"text": "Delete",
"visuallyHiddenText": "(Karen Francis)",
"href": "#/delete"
},
{
"text": "Withdraw",
"visuallyHiddenText": "(Karen Francis)",
"href": "#/withdraw"
}
]
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Basic with summary list and button
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
Add role
</button>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
Add role
</button>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "Regional Manager",
"level": 3
}
}) %}
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
Add role
</button>
{% endcall %}Basic with summary list and heading link
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
href="#"
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Href="#"
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"href": "#",
"heading": {
"text": "Regional Manager",
"level": 3
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Basic with summary lists
Regional Managers
East
- Name
- Karen Francis
- Date of birth
- 15 March 1984
West
- Name
- Sarah Philips
- Date of birth
- 5 January 1978
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "Regional Managers",
Level = 3,
})"
>
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">East</h4>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">West</h4>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Sarah Philips
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
5 January 1978
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "Regional Managers",
Level = 3,
})"
>
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">East</h4>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">West</h4>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Sarah Philips
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
5 January 1978
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "Regional Managers",
"level": 3
}
}) %}
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">East</h4>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">West</h4>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Sarah Philips
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
5 January 1978
</dd>
</div>
</dl>
{% endcall %}Clickable
Introduction to care and support
A quick guide for people who have care and support needs and their carers
Razor Pages and MVC
<nhsuk-card
href="#"
heading-options="@(new CardHeadingOptions
{
Text = "Introduction to care and support",
Size = "m",
})"
description="A quick guide for people who have care and support needs and their carers"
clickable="true"
/>Blazor
<NhsukCard
Href="#"
Heading="@(new CardHeadingOptions
{
Text = "Introduction to care and support",
Size = "m",
})"
Description="@("A quick guide for people who have care and support needs and their carers")"
Clickable="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"href": "#",
"heading": {
"text": "Introduction to care and support",
"size": "m"
},
"description": "A quick guide for people who have care and support needs and their carers",
"clickable": true
}) }}Emergency (red and black)
Immediate action required: Call 999 if you have sudden chest pain that:
- spreads to your arms, back, neck or jaw
- makes your chest feel tight or heavy
- also started with shortness of breath, sweating and feeling or being sick
You could be having a heart attack. Call 999 immediately as you need immediate treatment in hospital.
Razor Pages and MVC
<nhsuk-card
heading="Call 999 if you have sudden chest pain that:"
variant="emergency"
>
<ul>
<li>spreads to your arms, back, neck or jaw</li>
<li>makes your chest feel tight or heavy</li>
<li>also started with shortness of breath, sweating and feeling or being sick</li>
</ul>
<p>You could be having a heart attack. Call 999 immediately as you need immediate treatment in hospital.</p>
</nhsuk-card>Blazor
<NhsukCard
Heading="@("Call 999 if you have sudden chest pain that:")"
Variant="emergency"
>
<ul>
<li>spreads to your arms, back, neck or jaw</li>
<li>makes your chest feel tight or heavy</li>
<li>also started with shortness of breath, sweating and feeling or being sick</li>
</ul>
<p>You could be having a heart attack. Call 999 immediately as you need immediate treatment in hospital.</p>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": "Call 999 if you have sudden chest pain that:",
"variant": "emergency"
}) %}
<ul>
<li>spreads to your arms, back, neck or jaw</li>
<li>makes your chest feel tight or heavy</li>
<li>also started with shortness of breath, sweating and feeling or being sick</li>
</ul>
<p>You could be having a heart attack. Call 999 immediately as you need immediate treatment in hospital.</p>
{% endcall %}Emergency (red and black) with action link
Immediate action required: Call 999 or go to A&E now if:
- you're coughing up more than just a few spots or streaks of blood – this could be a sign of serious bleeding in your lungs
- you have severe difficulty breathing – you're gasping, choking or not able to get words out
Razor Pages and MVC
<nhsuk-card heading="Call 999 or go to A&E now if:" variant="emergency">
<ul>
<li>you're coughing up more than just a few spots or streaks of blood – this could be a sign of serious bleeding in your lungs</li>
<li>you have severe difficulty breathing – you're gasping, choking or not able to get words out</li>
</ul>
<a class="nhsuk-action-link nhsuk-action-link--reverse" href="#">
<svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
<path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
</svg>
<span class="nhsuk-action-link__text">
Find your nearest A&E
</span>
</a>
</nhsuk-card>Blazor
<NhsukCard Heading="@("Call 999 or go to A&E now if:")" Variant="emergency">
<ul>
<li>you're coughing up more than just a few spots or streaks of blood – this could be a sign of serious bleeding in your lungs</li>
<li>you have severe difficulty breathing – you're gasping, choking or not able to get words out</li>
</ul>
<a class="nhsuk-action-link nhsuk-action-link--reverse" href="#">
<svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
<path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
</svg>
<span class="nhsuk-action-link__text">
Find your nearest A&E
</span>
</a>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": "Call 999 or go to A&E now if:",
"variant": "emergency"
}) %}
<ul>
<li>you're coughing up more than just a few spots or streaks of blood – this could be a sign of serious bleeding in your lungs</li>
<li>you have severe difficulty breathing – you're gasping, choking or not able to get words out</li>
</ul>
<a class="nhsuk-action-link nhsuk-action-link--reverse" href="#">
<svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
<path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
</svg>
<span class="nhsuk-action-link__text">
Find your nearest A&E
</span>
</a>
{% endcall %}Feature
Feature card heading
Feature card description.
Razor Pages and MVC
<nhsuk-card
variant="feature"
heading="Feature card heading"
description="Feature card description."
/>Blazor
<NhsukCard
Variant="feature"
Heading="@("Feature card heading")"
Description="@("Feature card description.")"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"variant": "feature",
"heading": "Feature card heading",
"description": "Feature card description."
}) }}Feature with A to Z content
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "A",
Id = "a",
Size = "m",
})"
variant="feature"
description-options="@(new CardDescriptionOptions
{
Html = @"<ul class=""nhsuk-list nhsuk-list--border"">
<li><a href=""#/conditions/abdominal-aortic-aneurysm/"">AAA, see Abdominal aortic aneurysm</a></li>
<li><a href=""#/conditions/abdominal-aortic-aneurysm/"">Abdominal aortic aneurysm</a></li>
<li><a href=""#/conditions/abscess/"">Abscess</a></li>
</ul>",
})"
/>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "A",
Id = "a",
Size = "m",
})"
Variant="feature"
Description="@(new CardDescriptionOptions
{
Html = @"<ul class=""nhsuk-list nhsuk-list--border"">
<li><a href=""#/conditions/abdominal-aortic-aneurysm/"">AAA, see Abdominal aortic aneurysm</a></li>
<li><a href=""#/conditions/abdominal-aortic-aneurysm/"">Abdominal aortic aneurysm</a></li>
<li><a href=""#/conditions/abscess/"">Abscess</a></li>
</ul>",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"heading": {
"text": "A",
"id": "a",
"size": "m"
},
"variant": "feature",
"description": {
"html": "<ul class=\"nhsuk-list nhsuk-list--border\">\n <li><a href=\"#/conditions/abdominal-aortic-aneurysm/\">AAA, see Abdominal aortic aneurysm</a></li>\n <li><a href=\"#/conditions/abdominal-aortic-aneurysm/\">Abdominal aortic aneurysm</a></li>\n <li><a href=\"#/conditions/abscess/\">Abscess</a></li>\n</ul>"
}
}) }}Feature with nested card and summary list
Flu: Follow-up requested
Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.
Record a new consent responseConsent responses
Sarah Philips (Mum)
- Email address
- sarah.philips@example.com
- Date
- 25 August 2025 at 4:04 pm
- Response
- Follow up requested
Razor Pages and MVC
<nhsuk-card heading="Flu: Follow-up requested" variant="feature">
<p>Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.</p>
<a class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" href="#" role="button" draggable="false">
Record a new consent response
</a>
<h3 class="nhsuk-heading-s">Consent responses</h3>
<div class="nhsuk-card nhsuk-card--clickable">
<div class="nhsuk-card__content">
<h4 class="nhsuk-card__heading">
<a class="nhsuk-card__link" href="#">Sarah Philips (Mum)</a>
</h4>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Email address
</dt>
<dd class="nhsuk-summary-list__value">
sarah.philips@example.com
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date
</dt>
<dd class="nhsuk-summary-list__value">
25 August 2025 at 4:04 pm
</dd>
</div>
<div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-border">
<dt class="nhsuk-summary-list__key">
Response
</dt>
<dd class="nhsuk-summary-list__value">
<strong class="nhsuk-tag nhsuk-tag--orange">
Follow up requested
</strong>
</dd>
</div>
</dl>
</div>
</div>
</nhsuk-card>Blazor
<NhsukCard Heading="@("Flu: Follow-up requested")" Variant="feature">
<p>Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.</p>
<a class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" href="#" role="button" draggable="false">
Record a new consent response
</a>
<h3 class="nhsuk-heading-s">Consent responses</h3>
<div class="nhsuk-card nhsuk-card--clickable">
<div class="nhsuk-card__content">
<h4 class="nhsuk-card__heading">
<a class="nhsuk-card__link" href="#">Sarah Philips (Mum)</a>
</h4>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Email address
</dt>
<dd class="nhsuk-summary-list__value">
sarah.philips@example.com
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date
</dt>
<dd class="nhsuk-summary-list__value">
25 August 2025 at 4:04 pm
</dd>
</div>
<div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-border">
<dt class="nhsuk-summary-list__key">
Response
</dt>
<dd class="nhsuk-summary-list__value">
<strong class="nhsuk-tag nhsuk-tag--orange">
Follow up requested
</strong>
</dd>
</div>
</dl>
</div>
</div>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": "Flu: Follow-up requested",
"variant": "feature"
}) %}
<p>Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.</p>
<a class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" href="#" role="button" draggable="false">
Record a new consent response
</a>
<h3 class="nhsuk-heading-s">Consent responses</h3>
<div class="nhsuk-card nhsuk-card--clickable">
<div class="nhsuk-card__content">
<h4 class="nhsuk-card__heading">
<a class="nhsuk-card__link" href="#">Sarah Philips (Mum)</a>
</h4>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Email address
</dt>
<dd class="nhsuk-summary-list__value">
sarah.philips@example.com
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date
</dt>
<dd class="nhsuk-summary-list__value">
25 August 2025 at 4:04 pm
</dd>
</div>
<div class="nhsuk-summary-list__row nhsuk-summary-list__row--no-border">
<dt class="nhsuk-summary-list__key">
Response
</dt>
<dd class="nhsuk-summary-list__value">
<strong class="nhsuk-tag nhsuk-tag--orange">
Follow up requested
</strong>
</dd>
</div>
</dl>
</div>
</div>
{% endcall %}Feature with summary list
Feature card heading
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card heading="Feature card heading" variant="feature">
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard Heading="@("Feature card heading")" Variant="feature">
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": "Feature card heading",
"variant": "feature"
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Heading
If you need help now, but it's not an emergency
Go to NHS 111 online or call 111.
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "If you need help now, but it's not an emergency",
Size = "s",
})"
>
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "If you need help now, but it's not an emergency",
Size = "s",
})"
>
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "If you need help now, but it's not an emergency",
"size": "s"
}
}) %}
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
{% endcall %}Heading
If you need help now, but it's not an emergency
Go to NHS 111 online or call 111.
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "If you need help now, but it's not an emergency",
Size = "m",
})"
>
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "If you need help now, but it's not an emergency",
Size = "m",
})"
>
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "If you need help now, but it's not an emergency",
"size": "m"
}
}) %}
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
{% endcall %}Heading
If you need help now, but it's not an emergency
Go to NHS 111 online or call 111.
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "If you need help now, but it's not an emergency",
Size = "l",
})"
>
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "If you need help now, but it's not an emergency",
Size = "l",
})"
>
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "If you need help now, but it's not an emergency",
"size": "l"
}
}) %}
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
{% endcall %}Heading
If you need help now, but it's not an emergency
Go to NHS 111 online or call 111.
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "If you need help now, but it's not an emergency",
Size = "xl",
})"
>
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "If you need help now, but it's not an emergency",
Size = "xl",
})"
>
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "If you need help now, but it's not an emergency",
"size": "xl"
}
}) %}
<p class="nhsuk-card__description">Go to <a href="#">NHS 111 online</a> or <a href="#">call 111</a>.</p>
{% endcall %}Primary (with chevron)
Razor Pages and MVC
<nhsuk-card
href="#"
heading-options="@(new CardHeadingOptions
{
Text = "Breast screening",
Size = "m",
})"
variant="primary"
clickable="true"
/>Blazor
<NhsukCard
Href="#"
Heading="@(new CardHeadingOptions
{
Text = "Breast screening",
Size = "m",
})"
Variant="primary"
Clickable="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"href": "#",
"heading": {
"text": "Breast screening",
"size": "m"
},
"variant": "primary",
"clickable": true
}) }}Primary (with chevron and description)
Introduction to care and support
A quick guide for people who have care and support needs and their carers
Razor Pages and MVC
<nhsuk-card
href="#"
heading-options="@(new CardHeadingOptions
{
Text = "Introduction to care and support",
Size = "m",
})"
description="A quick guide for people who have care and support needs and their carers"
clickable="true"
variant="primary"
/>Blazor
<NhsukCard
Href="#"
Heading="@(new CardHeadingOptions
{
Text = "Introduction to care and support",
Size = "m",
})"
Description="@("A quick guide for people who have care and support needs and their carers")"
Clickable="true"
Variant="primary"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"href": "#",
"heading": {
"text": "Introduction to care and support",
"size": "m"
},
"description": "A quick guide for people who have care and support needs and their carers",
"clickable": true,
"variant": "primary"
}) }}Secondary
Urgent and emergency care services
Services the NHS provides if you need urgent or emergency medical help
Razor Pages and MVC
<nhsuk-card
href="#"
heading-options="@(new CardHeadingOptions
{
Text = "Urgent and emergency care services",
Size = "m",
})"
description="Services the NHS provides if you need urgent or emergency medical help"
clickable="true"
variant="secondary"
/>Blazor
<NhsukCard
Href="#"
Heading="@(new CardHeadingOptions
{
Text = "Urgent and emergency care services",
Size = "m",
})"
Description="@("Services the NHS provides if you need urgent or emergency medical help")"
Clickable="true"
Variant="secondary"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"href": "#",
"heading": {
"text": "Urgent and emergency care services",
"size": "m"
},
"description": "Services the NHS provides if you need urgent or emergency medical help",
"clickable": true,
"variant": "secondary"
}) }}Secondary non-clickable with custom description
Why we are reinvesting in the NHS Prototype kit
21 July 2025
Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.
Razor Pages and MVC
<nhsuk-card
href="#"
variant="secondary"
heading-options="@(new CardHeadingOptions
{
Text = "Why we are reinvesting in the NHS Prototype kit",
Classes = "nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2",
})"
description-options="@(new CardDescriptionOptions
{
Html = @"<p class=""nhsuk-body-s nhsuk-u-margin-bottom-2"">21 July 2025</p>
<p class=""nhsuk-card__description"">Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>",
})"
/>Blazor
<NhsukCard
Href="#"
Variant="secondary"
Heading="@(new CardHeadingOptions
{
Text = "Why we are reinvesting in the NHS Prototype kit",
Classes = "nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2",
})"
Description="@(new CardDescriptionOptions
{
Html = @"<p class=""nhsuk-body-s nhsuk-u-margin-bottom-2"">21 July 2025</p>
<p class=""nhsuk-card__description"">Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"href": "#",
"variant": "secondary",
"heading": {
"text": "Why we are reinvesting in the NHS Prototype kit",
"classes": "nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2"
},
"description": {
"html": "<p class=\"nhsuk-body-s nhsuk-u-margin-bottom-2\">21 July 2025</p>\n<p class=\"nhsuk-card__description\">Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>"
}
}) }}Secondary with custom HTML
Help from NHS 111
If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.
Go to 111.nhs.uk or call 111.
For a life-threatening emergency call 999.
Razor Pages and MVC
<nhsuk-card
variant="secondary"
heading-options="@(new CardHeadingOptions
{
Text = "Help from NHS 111",
Level = 3,
})"
>
<p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>
</nhsuk-card>Blazor
<NhsukCard
Variant="secondary"
Heading="@(new CardHeadingOptions
{
Text = "Help from NHS 111",
Level = 3,
})"
>
<p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"variant": "secondary",
"heading": {
"text": "Help from NHS 111",
"level": 3
}
}) %}
<p class="nhsuk-body">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>
<p class="nhsuk-body">Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p>
<p class="nhsuk-body">For a life-threatening emergency call 999.</p>
{% endcall %}Secondary with heading link
Introduction to care and support
A quick guide for people who have care and support needs and their carers
Razor Pages and MVC
<nhsuk-card
href="#"
variant="secondary"
heading-options="@(new CardHeadingOptions
{
Text = "Introduction to care and support",
Size = "m",
Level = 3,
})"
description="A quick guide for people who have care and support needs and their carers"
/>Blazor
<NhsukCard
Href="#"
Variant="secondary"
Heading="@(new CardHeadingOptions
{
Text = "Introduction to care and support",
Size = "m",
Level = 3,
})"
Description="@(new CardDescriptionOptions
{
Text = "A quick guide for people who have care and support needs and their carers",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"href": "#",
"variant": "secondary",
"heading": {
"text": "Introduction to care and support",
"size": "m",
"level": 3
},
"description": {
"text": "A quick guide for people who have care and support needs and their carers"
}
}) }}Secondary without heading
A quick guide for people who have care and support needs and their carers
Razor Pages and MVC
<nhsuk-card
variant="secondary"
description="A quick guide for people who have care and support needs and their carers"
/>Blazor
<NhsukCard
Variant="secondary"
Description="@(new CardDescriptionOptions
{
Text = "A quick guide for people who have care and support needs and their carers",
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"variant": "secondary",
"description": {
"text": "A quick guide for people who have care and support needs and their carers"
}
}) }}Secondary with summary list
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
variant="secondary"
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Variant="secondary"
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"variant": "secondary",
"heading": {
"text": "Regional Manager",
"level": 3
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Secondary with summary list and actions
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
variant="secondary"
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Variant="secondary"
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
Actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"variant": "secondary",
"heading": {
"text": "Regional Manager",
"level": 3
},
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
},
{
"text": "Withdraw",
"href": "#/withdraw"
}
]
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Secondary with summary list and actions (empty items)
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
variant="secondary"
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
null,
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Variant="secondary"
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
Actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
null,
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"variant": "secondary",
"heading": {
"text": "Regional Manager",
"level": 3
},
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
},
false
]
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Secondary with summary list and actions, without heading
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
variant="secondary"
actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
VisuallyHiddenText = "(Karen Francis)",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
VisuallyHiddenText = "(Karen Francis)",
Href = "#/withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Variant="secondary"
Actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
VisuallyHiddenText = "(Karen Francis)",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
VisuallyHiddenText = "(Karen Francis)",
Href = "#/withdraw",
},
],
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"variant": "secondary",
"actions": {
"items": [
{
"text": "Delete",
"visuallyHiddenText": "(Karen Francis)",
"href": "#/delete"
},
{
"text": "Withdraw",
"visuallyHiddenText": "(Karen Francis)",
"href": "#/withdraw"
}
]
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Secondary with summary list and button
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
variant="secondary"
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
Add role
</button>
</nhsuk-card>Blazor
<NhsukCard
Variant="secondary"
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
Add role
</button>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"variant": "secondary",
"heading": {
"text": "Regional Manager",
"level": 3
}
}) %}
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
Add role
</button>
{% endcall %}Secondary with summary list and heading link
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-card
href="#"
variant="secondary"
heading-options="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Href="#"
Variant="secondary"
Heading="@(new CardHeadingOptions
{
Text = "Regional Manager",
Level = 3,
})"
>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"href": "#",
"variant": "secondary",
"heading": {
"text": "Regional Manager",
"level": 3
}
}) %}
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
{% endcall %}Secondary with summary lists
Regional Managers
East
- Name
- Karen Francis
- Date of birth
- 15 March 1984
West
- Name
- Sarah Philips
- Date of birth
- 5 January 1978
Razor Pages and MVC
<nhsuk-card
variant="secondary"
heading-options="@(new CardHeadingOptions
{
Text = "Regional Managers",
Level = 3,
})"
>
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">East</h4>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">West</h4>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Sarah Philips
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
5 January 1978
</dd>
</div>
</dl>
</nhsuk-card>Blazor
<NhsukCard
Variant="secondary"
Heading="@(new CardHeadingOptions
{
Text = "Regional Managers",
Level = 3,
})"
>
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">East</h4>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">West</h4>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Sarah Philips
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
5 January 1978
</dd>
</div>
</dl>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"variant": "secondary",
"heading": {
"text": "Regional Managers",
"level": 3
}
}) %}
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">East</h4>
<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Karen Francis
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
15 March 1984
</dd>
</div>
</dl>
<h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">West</h4>
<dl class="nhsuk-summary-list nhsuk-summary-list--no-last-row-border">
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Name
</dt>
<dd class="nhsuk-summary-list__value">
Sarah Philips
</dd>
</div>
<div class="nhsuk-summary-list__row">
<dt class="nhsuk-summary-list__key">
Date of birth
</dt>
<dd class="nhsuk-summary-list__value">
5 January 1978
</dd>
</div>
</dl>
{% endcall %}Top task
Razor Pages and MVC
<nhsuk-card
href="#"
clickable="true"
heading-options="@(new CardHeadingOptions
{
Text = "Order a repeat prescription",
Size = "xs",
Level = 3,
})"
/>Blazor
<NhsukCard
Href="#"
Clickable="true"
Heading="@(new CardHeadingOptions
{
Text = "Order a repeat prescription",
Size = "xs",
Level = 3,
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"href": "#",
"clickable": true,
"heading": {
"text": "Order a repeat prescription",
"size": "xs",
"level": 3
}
}) }}Non-urgent (blue)
Non-urgent advice: Speak to a GP if:
- you're not sure it's chickenpox
- the skin around the blisters is red, hot or painful (signs of infection)
- your child is dehydrated
- you're concerned about your child or they get worse
Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.
Razor Pages and MVC
<nhsuk-card
heading-options="@(new CardHeadingOptions
{
Text = "Speak to a GP if:",
Level = 3,
})"
variant="non-urgent"
>
<ul>
<li>you're not sure it's chickenpox</li>
<li>the skin around the blisters is red, hot or painful (signs of infection)</li>
<li>your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a></li>
<li>you're concerned about your child or they get worse</li>
</ul>
<p>Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.</p>
</nhsuk-card>Blazor
<NhsukCard
Heading="@(new CardHeadingOptions
{
Text = "Speak to a GP if:",
Level = 3,
})"
Variant="non-urgent"
>
<ul>
<li>you're not sure it's chickenpox</li>
<li>the skin around the blisters is red, hot or painful (signs of infection)</li>
<li>your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a></li>
<li>you're concerned about your child or they get worse</li>
</ul>
<p>Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.</p>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": {
"text": "Speak to a GP if:",
"level": 3
},
"variant": "non-urgent"
}) %}
<ul>
<li>you're not sure it's chickenpox</li>
<li>the skin around the blisters is red, hot or painful (signs of infection)</li>
<li>your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a></li>
<li>you're concerned about your child or they get worse</li>
</ul>
<p>Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.</p>
{% endcall %}Urgent (red)
Urgent advice: Ask for an urgent GP appointment if:
- you're an adult and have chickenpox
- you're pregnant and haven't had chickenpox before and you've been near someone with it
- you have a weakened immune system and you've been near someone with chickenpox
- you think your newborn baby has chickenpox
In these situations, your GP can prescribe medicine to prevent complications. You need to take it within 24 hours of the spots coming out.
Razor Pages and MVC
<nhsuk-card heading="Ask for an urgent GP appointment if:" variant="urgent">
<ul>
<li>you're an adult and have chickenpox</li>
<li>you're pregnant and haven't had chickenpox before and you've been near someone with it</li>
<li>you have a weakened immune system and you've been near someone with chickenpox</li>
<li>you think your newborn baby has chickenpox</li>
</ul>
<p>In these situations, your GP can prescribe medicine to prevent complications. You need to take it within 24 hours of the spots coming out.</p>
</nhsuk-card>Blazor
<NhsukCard Heading="@("Ask for an urgent GP appointment if:")" Variant="urgent">
<ul>
<li>you're an adult and have chickenpox</li>
<li>you're pregnant and haven't had chickenpox before and you've been near someone with it</li>
<li>you have a weakened immune system and you've been near someone with chickenpox</li>
<li>you think your newborn baby has chickenpox</li>
</ul>
<p>In these situations, your GP can prescribe medicine to prevent complications. You need to take it within 24 hours of the spots coming out.</p>
</NhsukCard>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{% call card({
"heading": "Ask for an urgent GP appointment if:",
"variant": "urgent"
}) %}
<ul>
<li>you're an adult and have chickenpox</li>
<li>you're pregnant and haven't had chickenpox before and you've been near someone with it</li>
<li>you have a weakened immune system and you've been near someone with chickenpox</li>
<li>you think your newborn baby has chickenpox</li>
</ul>
<p>In these situations, your GP can prescribe medicine to prevent complications. You need to take it within 24 hours of the spots coming out.</p>
{% endcall %}Warning
School, nursery or work
Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.
Razor Pages and MVC
<nhsuk-card
heading="School, nursery or work"
description="Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared."
variant="warning"
/>Blazor
<NhsukCard
Heading="@("School, nursery or work")"
Description="@("Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.")"
Variant="warning"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"heading": "School, nursery or work",
"description": "Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.",
"variant": "warning"
}) }}Warning with actions
School, nursery or work
Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.
Razor Pages and MVC
<nhsuk-card
heading="School, nursery or work"
description="Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared."
variant="warning"
actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Dismiss",
Href = "#/dismiss",
},
],
})"
/>Blazor
<NhsukCard
Heading="@("School, nursery or work")"
Description="@("Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.")"
Variant="warning"
Actions="@(new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Dismiss",
Href = "#/dismiss",
},
],
})"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"heading": "School, nursery or work",
"description": "Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.",
"variant": "warning",
"actions": {
"items": [
{
"text": "Dismiss",
"href": "#/dismiss"
}
]
}
}) }}With image
Exercise
Programmes, workouts and tips to get you moving and improve your fitness and wellbeing
Razor Pages and MVC
<nhsuk-card
image="@(new CardImageOptions
{
Src = "/nhsuk-frontend/assets/example-image-exercise.jpg",
})"
href="#"
heading-options="@(new CardHeadingOptions
{
Text = "Exercise",
Size = "m",
})"
description="Programmes, workouts and tips to get you moving and improve your fitness and wellbeing"
clickable="true"
/>Blazor
<NhsukCard
Image="@(new CardImageOptions
{
Src = "/nhsuk-frontend/assets/example-image-exercise.jpg",
})"
Href="#"
Heading="@(new CardHeadingOptions
{
Text = "Exercise",
Size = "m",
})"
Description="@("Programmes, workouts and tips to get you moving and improve your fitness and wellbeing")"
Clickable="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"image": {
"src": "/nhsuk-frontend/assets/example-image-exercise.jpg"
},
"href": "#",
"heading": {
"text": "Exercise",
"size": "m"
},
"description": "Programmes, workouts and tips to get you moving and improve your fitness and wellbeing",
"clickable": true
}) }}With image and caption
Exercise
Programmes, workouts and tips to get you moving and improve your fitness and wellbeing
Razor Pages and MVC
<nhsuk-card
image="@(new CardImageOptions
{
Html = @"<figure class=""nhsuk-image"">
<img class=""nhsuk-image__img"" src=""/nhsuk-frontend/assets/example-image-exercise.jpg"" alt="""">
<figcaption class=""nhsuk-image__caption"">
No specific amount of time is recommended, but a typical training session could take less than 20 minutes.
</figcaption>
</figure>
",
})"
href="#"
heading-options="@(new CardHeadingOptions
{
Text = "Exercise",
Size = "m",
})"
description="Programmes, workouts and tips to get you moving and improve your fitness and wellbeing"
clickable="true"
/>Blazor
<NhsukCard
Image="@(new CardImageOptions
{
Html = @"<figure class=""nhsuk-image"">
<img class=""nhsuk-image__img"" src=""/nhsuk-frontend/assets/example-image-exercise.jpg"" alt="""">
<figcaption class=""nhsuk-image__caption"">
No specific amount of time is recommended, but a typical training session could take less than 20 minutes.
</figcaption>
</figure>
",
})"
Href="#"
Heading="@(new CardHeadingOptions
{
Text = "Exercise",
Size = "m",
})"
Description="@("Programmes, workouts and tips to get you moving and improve your fitness and wellbeing")"
Clickable="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"image": {
"html": "<figure class=\"nhsuk-image\">\n <img class=\"nhsuk-image__img\" src=\"/nhsuk-frontend/assets/example-image-exercise.jpg\" alt=\"\">\n <figcaption class=\"nhsuk-image__caption\">\n No specific amount of time is recommended, but a typical training session could take less than 20 minutes.\n </figcaption>\n</figure>\n"
},
"href": "#",
"heading": {
"text": "Exercise",
"size": "m"
},
"description": "Programmes, workouts and tips to get you moving and improve your fitness and wellbeing",
"clickable": true
}) }}With image and custom HTML
Why we are reinvesting in the NHS prototype kit
Published on: 21 July 2025
NHS England Design Matters blog
Frankie Roberto and Mike Gallagher explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.
Razor Pages and MVC
<nhsuk-card
image="@(new CardImageOptions
{
Src = "/nhsuk-frontend/assets/example-image-prototype-kit.png",
})"
href="https://digital.nhs.uk/blog/design-matters/2025/why-we-are-reinvesting-in-the-nhs-prototype-kit"
clickable="true"
heading-options="@(new CardHeadingOptions
{
Text = "Why we are reinvesting in the NHS prototype kit",
Html = @"<p class=""nhsuk-body-s nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-0""><span class=""nhsuk-u-visually-hidden"">Published on: </span>21 July 2025</p>
<p class=""nhsuk-body-s nhsuk-u-font-weight-bold"">NHS England Design Matters blog</p>",
Size = "m",
})"
description="Frankie Roberto and Mike Gallagher explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it."
/>Blazor
<NhsukCard
Image="@(new CardImageOptions
{
Src = "/nhsuk-frontend/assets/example-image-prototype-kit.png",
})"
Href="https://digital.nhs.uk/blog/design-matters/2025/why-we-are-reinvesting-in-the-nhs-prototype-kit"
Clickable="true"
Heading="@(new CardHeadingOptions
{
Text = "Why we are reinvesting in the NHS prototype kit",
Html = @"<p class=""nhsuk-body-s nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-0""><span class=""nhsuk-u-visually-hidden"">Published on: </span>21 July 2025</p>
<p class=""nhsuk-body-s nhsuk-u-font-weight-bold"">NHS England Design Matters blog</p>",
Size = "m",
})"
Description="@("Frankie Roberto and Mike Gallagher explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.")"
/>Nunjucks (upstream)
{% from "nhsuk/components/card/macro.njk" import card %}
{{ card({
"image": {
"src": "/nhsuk-frontend/assets/example-image-prototype-kit.png"
},
"href": "https://digital.nhs.uk/blog/design-matters/2025/why-we-are-reinvesting-in-the-nhs-prototype-kit",
"clickable": true,
"heading": {
"text": "Why we are reinvesting in the NHS prototype kit",
"html": "<p class=\"nhsuk-body-s nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-0\"><span class=\"nhsuk-u-visually-hidden\">Published on: </span>21 July 2025</p>\n<p class=\"nhsuk-body-s nhsuk-u-font-weight-bold\">NHS England Design Matters blog</p>",
"size": "m"
},
"description": "Frankie Roberto and Mike Gallagher explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it."
}) }}