ComponentSummary list
28 of 28 upstream examples match.
Razor component: <NhsukSummaryList>
Showing the examples from upstream's review app. Show 3 more test-only examples
Default
- Name
- Karen Francis
- Date of birth
- 15 March 1984
- Contact information
- 73 Roman Rd
Leeds
LS2 5ZN - Contact details
07700 900362
karen.francis@example.com
Razor Pages and MVC
<nhsuk-summary-list
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
},
])"
/>Blazor
<NhsukSummaryList
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
},
{
"key": {
"text": "Contact information"
},
"value": {
"html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
}
},
{
"key": {
"text": "Contact details"
},
"value": {
"html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
}
}
]
}) }}With actions
Razor Pages and MVC
<nhsuk-summary-list
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "name",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
])"
/>Blazor
<NhsukSummaryList
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "name",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "name"
}
]
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "date of birth"
}
]
}
},
{
"key": {
"text": "Contact information"
},
"value": {
"html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "contact information"
}
]
}
},
{
"key": {
"text": "Contact details"
},
"value": {
"html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "contact details"
}
]
}
}
]
}) }}With actions array
Razor Pages and MVC
<nhsuk-summary-list
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "name",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
])"
/>Blazor
<NhsukSummaryList
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "name",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
},
"actions": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "name"
}
]
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
},
"actions": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "date of birth"
}
]
},
{
"key": {
"text": "Contact information"
},
"value": {
"html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "contact information"
}
]
}
},
{
"key": {
"text": "Contact details"
},
"value": {
"html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
},
"actions": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "contact details"
}
]
}
]
}) }}With actions as buttons
- Name
- Karen Francis
- Date of birth
- 15 March 1984
- Contact information
- 73 Roman Rd
Leeds
LS2 5ZN - Contact details
07700 900362
karen.francis@example.com
Razor Pages and MVC
<nhsuk-summary-list
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "name",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
])"
/>Blazor
<NhsukSummaryList
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "name",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
},
"actions": {
"items": [
{
"type": "submit",
"text": "Change",
"visuallyHiddenText": "name"
}
]
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
},
"actions": {
"items": [
{
"type": "submit",
"text": "Change",
"visuallyHiddenText": "date of birth"
}
]
}
},
{
"key": {
"text": "Contact information"
},
"value": {
"html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
},
"actions": {
"items": [
{
"type": "submit",
"text": "Change",
"visuallyHiddenText": "contact information"
}
]
}
},
{
"key": {
"text": "Contact details"
},
"value": {
"html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
},
"actions": {
"items": [
{
"type": "submit",
"text": "Change",
"visuallyHiddenText": "contact details"
}
]
}
}
]
}) }}With item strings
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
rows="@([
new SummaryListRowsItem
{
Key = "Name",
Value = "Karen Francis",
},
new SummaryListRowsItem
{
Key = "Date of birth",
Value = "15 March 1984",
},
])"
/>Blazor
<NhsukSummaryList
Rows="@([
new SummaryListRowsItem
{
Key = "Name",
Value = "Karen Francis",
},
new SummaryListRowsItem
{
Key = "Date of birth",
Value = "15 March 1984",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"rows": [
{
"key": "Name",
"value": "Karen Francis"
},
{
"key": "Date of birth",
"value": "15 March 1984"
}
]
}) }}With item widths
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
Width = "one-half",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
Width = "one-half",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
Width = "one-half",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
Width = "one-half",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"rows": [
{
"key": {
"text": "Name",
"width": "one-half"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth",
"width": "one-half"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}With multiple actions
- Name
- Karen Francis
- Medicines
Isotretinoin capsules (Roaccutane)
Isotretinoin gel (Isotrex)
Pepto-Bismol (bismuth subsalicylate)
Razor Pages and MVC
<nhsuk-summary-list
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new contact details",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Medicines",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>Isotretinoin capsules (Roaccutane)</p>
<p>Isotretinoin gel (Isotrex)</p>
<p>Pepto-Bismol (bismuth subsalicylate)</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new medicine",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "medicines",
},
],
},
},
])"
/>Blazor
<NhsukSummaryList
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new contact details",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Medicines",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>Isotretinoin capsules (Roaccutane)</p>
<p>Isotretinoin gel (Isotrex)</p>
<p>Pepto-Bismol (bismuth subsalicylate)</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new medicine",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "medicines",
},
],
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "date of birth"
}
]
}
},
{
"key": {
"text": "Contact information"
},
"value": {
"html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "contact information"
}
]
}
},
{
"key": {
"text": "Contact details"
},
"value": {
"html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
},
"actions": {
"items": [
{
"href": "#/add",
"text": "Add",
"visuallyHiddenText": "new contact details"
},
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "contact details"
}
]
}
},
{
"key": {
"text": "Medicines"
},
"value": {
"html": "<p>Isotretinoin capsules (Roaccutane)</p>\n<p>Isotretinoin gel (Isotrex)</p>\n<p>Pepto-Bismol (bismuth subsalicylate)</p>"
},
"actions": {
"items": [
{
"href": "#/add",
"text": "Add",
"visuallyHiddenText": "new medicine"
},
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "medicines"
}
]
}
}
]
}) }}With multiple actions as buttons
- Name
- Karen Francis
- Date of birth
- 15 March 1984
- Contact information
- 73 Roman Rd
Leeds
LS2 5ZN - Contact details
07700 900362
karen.francis@example.com
- Medicines
Isotretinoin capsules (Roaccutane)
Isotretinoin gel (Isotrex)
Pepto-Bismol (bismuth subsalicylate)
Razor Pages and MVC
<nhsuk-summary-list
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Add",
VisuallyHiddenText = "new contact details",
},
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Medicines",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>Isotretinoin capsules (Roaccutane)</p>
<p>Isotretinoin gel (Isotrex)</p>
<p>Pepto-Bismol (bismuth subsalicylate)</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Add",
VisuallyHiddenText = "new medicine",
},
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "medicines",
},
],
},
},
])"
/>Blazor
<NhsukSummaryList
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Add",
VisuallyHiddenText = "new contact details",
},
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Medicines",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>Isotretinoin capsules (Roaccutane)</p>
<p>Isotretinoin gel (Isotrex)</p>
<p>Pepto-Bismol (bismuth subsalicylate)</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Add",
VisuallyHiddenText = "new medicine",
},
new SummaryListRowsActionsItemsItem
{
Type = "submit",
Text = "Change",
VisuallyHiddenText = "medicines",
},
],
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
},
"actions": {
"items": [
{
"type": "submit",
"text": "Change",
"visuallyHiddenText": "date of birth"
}
]
}
},
{
"key": {
"text": "Contact information"
},
"value": {
"html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
},
"actions": {
"items": [
{
"type": "submit",
"text": "Change",
"visuallyHiddenText": "contact information"
}
]
}
},
{
"key": {
"text": "Contact details"
},
"value": {
"html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
},
"actions": {
"items": [
{
"type": "submit",
"text": "Add",
"visuallyHiddenText": "new contact details"
},
{
"type": "submit",
"text": "Change",
"visuallyHiddenText": "contact details"
}
]
}
},
{
"key": {
"text": "Medicines"
},
"value": {
"html": "<p>Isotretinoin capsules (Roaccutane)</p>\n<p>Isotretinoin gel (Isotrex)</p>\n<p>Pepto-Bismol (bismuth subsalicylate)</p>"
},
"actions": {
"items": [
{
"type": "submit",
"text": "Add",
"visuallyHiddenText": "new medicine"
},
{
"type": "submit",
"text": "Change",
"visuallyHiddenText": "medicines"
}
]
}
}
]
}) }}With multiple actions (empty items)
- Name
- Karen Francis
- Medicines
Isotretinoin capsules (Roaccutane)
Isotretinoin gel (Isotrex)
Pepto-Bismol (bismuth subsalicylate)
Razor Pages and MVC
<nhsuk-summary-list
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
null,
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
null,
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new contact details",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Medicines",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>Isotretinoin capsules (Roaccutane)</p>
<p>Isotretinoin gel (Isotrex)</p>
<p>Pepto-Bismol (bismuth subsalicylate)</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new medicine",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "medicines",
},
],
},
},
])"
/>Blazor
<NhsukSummaryList
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
null,
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
null,
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new contact details",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Medicines",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>Isotretinoin capsules (Roaccutane)</p>
<p>Isotretinoin gel (Isotrex)</p>
<p>Pepto-Bismol (bismuth subsalicylate)</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new medicine",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "medicines",
},
],
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
},
"actions": {
"items": [
false,
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "date of birth"
}
]
}
},
{
"key": {
"text": "Contact information"
},
"value": {
"html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
},
"actions": {
"items": [
false,
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "contact information"
}
]
}
},
{
"key": {
"text": "Contact details"
},
"value": {
"html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
},
"actions": {
"items": [
{
"href": "#/add",
"text": "Add",
"visuallyHiddenText": "new contact details"
},
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "contact details"
}
]
}
},
{
"key": {
"text": "Medicines"
},
"value": {
"html": "<p>Isotretinoin capsules (Roaccutane)</p>\n<p>Isotretinoin gel (Isotrex)</p>\n<p>Pepto-Bismol (bismuth subsalicylate)</p>"
},
"actions": {
"items": [
{
"href": "#/add",
"text": "Add",
"visuallyHiddenText": "new medicine"
},
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "medicines"
}
]
}
}
]
}) }}Without border
- Name
- Karen Francis
- Date of birth
- 15 March 1984
- Contact information
- 73 Roman Rd
Leeds
LS2 5ZN - Contact details
07700 900362
karen.francis@example.com
Razor Pages and MVC
<nhsuk-summary-list
border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
},
])"
/>Blazor
<NhsukSummaryList
Border="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"border": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
},
{
"key": {
"text": "Contact information"
},
"value": {
"html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
}
},
{
"key": {
"text": "Contact details"
},
"value": {
"html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
}
}
]
}) }}Without last row border
- Name
- Karen Francis
- Date of birth
- 15 March 1984
- Contact information
- 73 Roman Rd
Leeds
LS2 5ZN - Contact details
07700 900362
karen.francis@example.com
Razor Pages and MVC
<nhsuk-summary-list
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
},
])"
/>Blazor
<NhsukSummaryList
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
},
{
"key": {
"text": "Contact information"
},
"value": {
"html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
}
},
{
"key": {
"text": "Contact details"
},
"value": {
"html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
}
}
]
}) }}Without specific row border
- Name
- Karen Francis
- Date of birth
- 15 March 1984
- Contact information
- 73 Roman Rd
Leeds
LS2 5ZN - Contact details
07700 900362
karen.francis@example.com
Razor Pages and MVC
<nhsuk-summary-list
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
},
new SummaryListRowsItem
{
Border = false,
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
},
])"
/>Blazor
<NhsukSummaryList
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
},
new SummaryListRowsItem
{
Border = false,
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
},
{
"key": {
"text": "Contact information"
},
"value": {
"html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
}
},
{
"border": false,
"key": {
"text": "Contact details"
},
"value": {
"html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
}
}
]
}) }}As a card
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager",
"size": "m"
}
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}As a card (clickable) without actions
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Href = "#/card-clickable",
Clickable = true,
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Href = "#/card-clickable",
Clickable = true,
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager",
"size": "m"
},
"href": "#/card-clickable",
"clickable": true
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}As a card (feature) with actions
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Variant = "feature",
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Variant = "feature",
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager",
"size": "m"
},
"variant": "feature",
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
},
{
"text": "Withdraw",
"href": "#/withdraw"
}
]
}
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}As a card (feature) with custom HTML
Your read
- Annotations
Right breast
Microcalcification outside a mass, Clinical abnormality – Level 2 (benign)
- Change annotations (Your read)
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Your read",
Size = "m",
},
Variant = "feature",
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Opinion",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p class=""nhsuk-u-margin-bottom-3"">
<strong class=""nhsuk-tag nhsuk-tag--red"">
Recall for assessment
</strong>
</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "opinion",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Detailed opinion",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<div class=""nhsuk-grid-row"">
<div class=""nhsuk-grid-column-one-half"">
<p class=""nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold"">
Right breast
</p>
<p class=""nhsuk-u-margin-bottom-3"">
<strong class=""nhsuk-tag nhsuk-tag--red"">
Abnormal
</strong>
</p>
</div>
<div class=""nhsuk-grid-column-one-half"">
<p class=""nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold"">
Left breast
</p>
<p class=""nhsuk-u-margin-bottom-3 nhsuk-u-secondary-text-colour"">
Not recorded
</p>
</div>
</div>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "detailed opinion",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Annotations",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p class=""nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold"">
Right breast
</p>
<p class=""nhsuk-u-margin-bottom-0"">
Microcalcification outside a mass, Clinical abnormality – Level 2 (benign)
</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "annotations",
},
],
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Your read",
Size = "m",
},
Variant = "feature",
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Opinion",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p class=""nhsuk-u-margin-bottom-3"">
<strong class=""nhsuk-tag nhsuk-tag--red"">
Recall for assessment
</strong>
</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "opinion",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Detailed opinion",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<div class=""nhsuk-grid-row"">
<div class=""nhsuk-grid-column-one-half"">
<p class=""nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold"">
Right breast
</p>
<p class=""nhsuk-u-margin-bottom-3"">
<strong class=""nhsuk-tag nhsuk-tag--red"">
Abnormal
</strong>
</p>
</div>
<div class=""nhsuk-grid-column-one-half"">
<p class=""nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold"">
Left breast
</p>
<p class=""nhsuk-u-margin-bottom-3 nhsuk-u-secondary-text-colour"">
Not recorded
</p>
</div>
</div>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "detailed opinion",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Annotations",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p class=""nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold"">
Right breast
</p>
<p class=""nhsuk-u-margin-bottom-0"">
Microcalcification outside a mass, Clinical abnormality – Level 2 (benign)
</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "annotations",
},
],
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Your read",
"size": "m"
},
"variant": "feature"
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Opinion"
},
"value": {
"html": "<p class=\"nhsuk-u-margin-bottom-3\">\n <strong class=\"nhsuk-tag nhsuk-tag--red\">\n Recall for assessment\n</strong>\n\n</p>"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "opinion"
}
]
}
},
{
"key": {
"text": "Detailed opinion"
},
"value": {
"html": "<div class=\"nhsuk-grid-row\">\n <div class=\"nhsuk-grid-column-one-half\">\n <p class=\"nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold\">\n Right breast\n </p>\n <p class=\"nhsuk-u-margin-bottom-3\">\n <strong class=\"nhsuk-tag nhsuk-tag--red\">\n Abnormal\n</strong>\n\n </p>\n </div>\n\n <div class=\"nhsuk-grid-column-one-half\">\n <p class=\"nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold\">\n Left breast\n </p>\n <p class=\"nhsuk-u-margin-bottom-3 nhsuk-u-secondary-text-colour\">\n Not recorded\n </p>\n </div>\n</div>"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "detailed opinion"
}
]
}
},
{
"key": {
"text": "Annotations"
},
"value": {
"html": "<p class=\"nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold\">\n Right breast\n</p>\n<p class=\"nhsuk-u-margin-bottom-0\">\n Microcalcification outside a mass, Clinical abnormality – Level 2 (benign)\n</p>"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "annotations"
}
]
}
}
]
}) }}As a card (secondary) with actions
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Variant = "secondary",
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Variant = "secondary",
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager",
"size": "m"
},
"variant": "secondary",
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
},
{
"text": "Withdraw",
"href": "#/withdraw"
}
]
}
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}As a card (type emergency) with actions
Immediate action required: Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
},
Variant = "emergency",
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
},
Variant = "emergency",
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager"
},
"variant": "emergency",
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
},
{
"text": "Withdraw",
"href": "#/withdraw"
}
]
}
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}As a card (type non-urgent) with actions
Non-urgent advice: Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
},
Variant = "non-urgent",
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
},
Variant = "non-urgent",
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager"
},
"variant": "non-urgent",
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
},
{
"text": "Withdraw",
"href": "#/withdraw"
}
]
}
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}As a card (type urgent) with actions
Urgent advice: Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
},
Variant = "urgent",
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
},
Variant = "urgent",
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager"
},
"variant": "urgent",
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
},
{
"text": "Withdraw",
"href": "#/withdraw"
}
]
}
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}As a card with action
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
],
},
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
],
},
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager",
"size": "m"
},
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
}
]
}
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}As a card with action as a button
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Type = "submit",
Text = "Delete",
},
],
},
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Type = "submit",
Text = "Delete",
},
],
},
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager",
"size": "m"
},
"actions": {
"items": [
{
"type": "submit",
"text": "Delete"
}
]
}
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}As a card with actions
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager",
"size": "m"
},
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
},
{
"text": "Withdraw",
"href": "#/withdraw"
}
]
}
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}As a card with actions as buttons
Regional Manager
- Name
- Karen Francis
- Date of birth
- 15 March 1984
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Type = "submit",
Text = "Delete",
},
new CardActionsItemsItem
{
Type = "submit",
Text = "Withdraw",
},
],
},
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Type = "submit",
Text = "Delete",
},
new CardActionsItemsItem
{
Type = "submit",
Text = "Withdraw",
},
],
},
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager",
"size": "m"
},
"actions": {
"items": [
{
"type": "submit",
"text": "Delete"
},
{
"type": "submit",
"text": "Withdraw"
}
]
}
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
}
}
]
}) }}As a card with multiple actions
Regional Manager
- Name
- Karen Francis
- Contact details
07700 900362
karen.francis@example.com
- Medicines
Isotretinoin capsules (Roaccutane)
Isotretinoin gel (Isotrex)
Pepto-Bismol (bismuth subsalicylate)
Razor Pages and MVC
<nhsuk-summary-list
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "l",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
last-row-border="false"
rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new contact details",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Medicines",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>Isotretinoin capsules (Roaccutane)</p>
<p>Isotretinoin gel (Isotrex)</p>
<p>Pepto-Bismol (bismuth subsalicylate)</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new medicine",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "medicines",
},
],
},
},
])"
/>Blazor
<NhsukSummaryList
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Regional Manager",
Size = "l",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Delete",
Href = "#/delete",
},
new CardActionsItemsItem
{
Text = "Withdraw",
Href = "#/withdraw",
},
],
},
})"
LastRowBorder="false"
Rows="@([
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Name",
},
Value = new SummaryListRowsValueOptions
{
Text = "Karen Francis",
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Date of birth",
},
Value = new SummaryListRowsValueOptions
{
Text = "15 March 1984",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "date of birth",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact information",
},
Value = new SummaryListRowsValueOptions
{
Html = @"73 Roman Rd<br>
Leeds<br>
LS2 5ZN",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact information",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Contact details",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>07700 900362</p>
<p>karen.francis@example.com</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new contact details",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "contact details",
},
],
},
},
new SummaryListRowsItem
{
Key = new SummaryListRowsKeyOptions
{
Text = "Medicines",
},
Value = new SummaryListRowsValueOptions
{
Html = @"<p>Isotretinoin capsules (Roaccutane)</p>
<p>Isotretinoin gel (Isotrex)</p>
<p>Pepto-Bismol (bismuth subsalicylate)</p>",
},
Actions = new SummaryListRowsActionsOptions
{
Items = [
new SummaryListRowsActionsItemsItem
{
Href = "#/add",
Text = "Add",
VisuallyHiddenText = "new medicine",
},
new SummaryListRowsActionsItemsItem
{
Href = "#/change",
Text = "Change",
VisuallyHiddenText = "medicines",
},
],
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/summary-list/macro.njk" import summaryList %}
{{ summaryList({
"card": {
"heading": {
"text": "Regional Manager",
"size": "l"
},
"actions": {
"items": [
{
"text": "Delete",
"href": "#/delete"
},
{
"text": "Withdraw",
"href": "#/withdraw"
}
]
}
},
"lastRowBorder": false,
"rows": [
{
"key": {
"text": "Name"
},
"value": {
"text": "Karen Francis"
}
},
{
"key": {
"text": "Date of birth"
},
"value": {
"text": "15 March 1984"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "date of birth"
}
]
}
},
{
"key": {
"text": "Contact information"
},
"value": {
"html": "73 Roman Rd<br>\nLeeds<br>\nLS2 5ZN"
},
"actions": {
"items": [
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "contact information"
}
]
}
},
{
"key": {
"text": "Contact details"
},
"value": {
"html": "<p>07700 900362</p>\n<p>karen.francis@example.com</p>"
},
"actions": {
"items": [
{
"href": "#/add",
"text": "Add",
"visuallyHiddenText": "new contact details"
},
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "contact details"
}
]
}
},
{
"key": {
"text": "Medicines"
},
"value": {
"html": "<p>Isotretinoin capsules (Roaccutane)</p>\n<p>Isotretinoin gel (Isotrex)</p>\n<p>Pepto-Bismol (bismuth subsalicylate)</p>"
},
"actions": {
"items": [
{
"href": "#/add",
"text": "Add",
"visuallyHiddenText": "new medicine"
},
{
"href": "#/change",
"text": "Change",
"visuallyHiddenText": "medicines"
}
]
}
}
]
}) }}