Skip to main content
All components

ComponentTask list

6 of 6 upstream examples match. Razor component: <NhsukTaskList>

Default

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-task-list
    id-prefix="your-health"
    items="@([
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Exercise",
            },
            Href = "#/task/exercise",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Personal health",
            },
            Href = "#/task/personal-health",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Family health history",
            },
            Hint = new TaskListItemsHintOptions
            {
                Text = "Details of your parents, brothers and sisters",
            },
            Href = "#/task/family-health-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Smoking history",
            },
            Href = "#/task/smoking-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Blood test",
            },
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Cannot start yet",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour",
                },
            },
        },
    ])"
/>
Blazor 
<NhsukTaskList
    IdPrefix="your-health"
    Items="@([
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Exercise",
            },
            Href = "#/task/exercise",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Personal health",
            },
            Href = "#/task/personal-health",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Family health history",
            },
            Hint = new TaskListItemsHintOptions
            {
                Text = "Details of your parents, brothers and sisters",
            },
            Href = "#/task/family-health-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Smoking history",
            },
            Href = "#/task/smoking-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Blood test",
            },
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Cannot start yet",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour",
                },
            },
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/task-list/macro.njk" import taskList %}

{{ taskList({
  "idPrefix": "your-health",
  "items": [
    {
      "heading": {
        "text": "Exercise"
      },
      "href": "#/task/exercise",
      "status": {
        "tag": {
          "text": "Completed",
          "border": false,
          "colour": false,
          "classes": "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      "heading": {
        "text": "Personal health"
      },
      "href": "#/task/personal-health",
      "status": {
        "tag": {
          "text": "Completed",
          "border": false,
          "colour": false,
          "classes": "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      "heading": {
        "text": "Family health history"
      },
      "hint": {
        "text": "Details of your parents, brothers and sisters"
      },
      "href": "#/task/family-health-history",
      "status": {
        "tag": {
          "text": "Incomplete",
          "colour": "blue"
        }
      }
    },
    {
      "heading": {
        "text": "Smoking history"
      },
      "href": "#/task/smoking-history",
      "status": {
        "tag": {
          "text": "Incomplete",
          "colour": "blue"
        }
      }
    },
    {
      "heading": {
        "text": "Blood test"
      },
      "status": {
        "tag": {
          "text": "Cannot start yet",
          "border": false,
          "colour": false,
          "classes": "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour"
        }
      }
    }
  ]
}) }}

With deprecated status classes

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-task-list
    id-prefix="your-health"
    items="@([
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Exercise",
            },
            Href = "#/task/exercise",
            Status = new TaskListItemsStatusOptions
            {
                Text = "Completed",
                Classes = "nhsuk-task-list__status--completed",
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Personal health",
            },
            Href = "#/task/personal-health",
            Status = new TaskListItemsStatusOptions
            {
                Text = "Completed",
                Classes = "nhsuk-task-list__status--completed",
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Family health history",
            },
            Hint = new TaskListItemsHintOptions
            {
                Text = "Details of your parents, brothers and sisters",
            },
            Href = "#/task/family-health-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Smoking history",
            },
            Href = "#/task/smoking-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Blood test",
            },
            Status = new TaskListItemsStatusOptions
            {
                Text = "Cannot start yet",
                Classes = "nhsuk-task-list__status--cannot-start-yet",
            },
        },
    ])"
/>
Blazor 
<NhsukTaskList
    IdPrefix="your-health"
    Items="@([
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Exercise",
            },
            Href = "#/task/exercise",
            Status = new TaskListItemsStatusOptions
            {
                Text = "Completed",
                Classes = "nhsuk-task-list__status--completed",
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Personal health",
            },
            Href = "#/task/personal-health",
            Status = new TaskListItemsStatusOptions
            {
                Text = "Completed",
                Classes = "nhsuk-task-list__status--completed",
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Family health history",
            },
            Hint = new TaskListItemsHintOptions
            {
                Text = "Details of your parents, brothers and sisters",
            },
            Href = "#/task/family-health-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Smoking history",
            },
            Href = "#/task/smoking-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Blood test",
            },
            Status = new TaskListItemsStatusOptions
            {
                Text = "Cannot start yet",
                Classes = "nhsuk-task-list__status--cannot-start-yet",
            },
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/task-list/macro.njk" import taskList %}

{{ taskList({
  "idPrefix": "your-health",
  "items": [
    {
      "title": {
        "text": "Exercise"
      },
      "href": "#/task/exercise",
      "status": {
        "text": "Completed",
        "classes": "nhsuk-task-list__status--completed"
      }
    },
    {
      "title": {
        "text": "Personal health"
      },
      "href": "#/task/personal-health",
      "status": {
        "text": "Completed",
        "classes": "nhsuk-task-list__status--completed"
      }
    },
    {
      "title": {
        "text": "Family health history"
      },
      "hint": {
        "text": "Details of your parents, brothers and sisters"
      },
      "href": "#/task/family-health-history",
      "status": {
        "tag": {
          "text": "Incomplete",
          "colour": "blue"
        }
      }
    },
    {
      "title": {
        "text": "Smoking history"
      },
      "href": "#/task/smoking-history",
      "status": {
        "tag": {
          "text": "Incomplete",
          "colour": "blue"
        }
      }
    },
    {
      "title": {
        "text": "Blood test"
      },
      "status": {
        "text": "Cannot start yet",
        "classes": "nhsuk-task-list__status--cannot-start-yet"
      }
    }
  ]
}) }}

With deprecated titles

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-task-list
    id-prefix="your-health"
    items="@([
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Exercise",
            },
            Href = "#/task/exercise",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Personal health",
            },
            Href = "#/task/personal-health",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Family health history",
            },
            Hint = new TaskListItemsHintOptions
            {
                Text = "Details of your parents, brothers and sisters",
            },
            Href = "#/task/family-health-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Smoking history",
            },
            Href = "#/task/smoking-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Blood test",
            },
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Cannot start yet",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour",
                },
            },
        },
    ])"
/>
Blazor 
<NhsukTaskList
    IdPrefix="your-health"
    Items="@([
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Exercise",
            },
            Href = "#/task/exercise",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Personal health",
            },
            Href = "#/task/personal-health",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Family health history",
            },
            Hint = new TaskListItemsHintOptions
            {
                Text = "Details of your parents, brothers and sisters",
            },
            Href = "#/task/family-health-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Smoking history",
            },
            Href = "#/task/smoking-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Title = new TaskListItemsHeadingOptions
            {
                Text = "Blood test",
            },
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Cannot start yet",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour",
                },
            },
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/task-list/macro.njk" import taskList %}

{{ taskList({
  "idPrefix": "your-health",
  "items": [
    {
      "title": {
        "text": "Exercise"
      },
      "href": "#/task/exercise",
      "status": {
        "tag": {
          "text": "Completed",
          "border": false,
          "colour": false,
          "classes": "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      "title": {
        "text": "Personal health"
      },
      "href": "#/task/personal-health",
      "status": {
        "tag": {
          "text": "Completed",
          "border": false,
          "colour": false,
          "classes": "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      "title": {
        "text": "Family health history"
      },
      "hint": {
        "text": "Details of your parents, brothers and sisters"
      },
      "href": "#/task/family-health-history",
      "status": {
        "tag": {
          "text": "Incomplete",
          "colour": "blue"
        }
      }
    },
    {
      "title": {
        "text": "Smoking history"
      },
      "href": "#/task/smoking-history",
      "status": {
        "tag": {
          "text": "Incomplete",
          "colour": "blue"
        }
      }
    },
    {
      "title": {
        "text": "Blood test"
      },
      "status": {
        "tag": {
          "text": "Cannot start yet",
          "border": false,
          "colour": false,
          "classes": "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour"
        }
      }
    }
  ]
}) }}

With empty items

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-task-list
    id-prefix="your-health"
    items="@([
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Exercise",
            },
            Href = "#/task/exercise",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Personal health",
            },
            Href = "#/task/personal-health",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        null,
        null,
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Blood test",
            },
            Href = "#/task/blood-test",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
    ])"
/>
Blazor 
<NhsukTaskList
    IdPrefix="your-health"
    Items="@([
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Exercise",
            },
            Href = "#/task/exercise",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Personal health",
            },
            Href = "#/task/personal-health",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        null,
        null,
        new TaskListItemsItem
        {
            Heading = new TaskListItemsHeadingOptions
            {
                Text = "Blood test",
            },
            Href = "#/task/blood-test",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/task-list/macro.njk" import taskList %}

{{ taskList({
  "idPrefix": "your-health",
  "items": [
    {
      "heading": {
        "text": "Exercise"
      },
      "href": "#/task/exercise",
      "status": {
        "tag": {
          "text": "Completed",
          "border": false,
          "colour": false,
          "classes": "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      "heading": {
        "text": "Personal health"
      },
      "href": "#/task/personal-health",
      "status": {
        "tag": {
          "text": "Completed",
          "border": false,
          "colour": false,
          "classes": "nhsuk-u-font-weight-normal"
        }
      }
    },
    false,
    false,
    {
      "heading": {
        "text": "Blood test"
      },
      "href": "#/task/blood-test",
      "status": {
        "tag": {
          "text": "Incomplete",
          "colour": "blue"
        }
      }
    }
  ]
}) }}

With headings and hints as strings

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-task-list
    id-prefix="your-health"
    items="@([
        new TaskListItemsItem
        {
            Heading = "Exercise",
            Href = "#/task/exercise",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = "Personal health",
            Href = "#/task/personal-health",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = "Family health history",
            Hint = "Details of your parents, brothers and sisters",
            Href = "#/task/family-health-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = "Smoking history",
            Href = "#/task/smoking-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = "Blood test",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Cannot start yet",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour",
                },
            },
        },
    ])"
/>
Blazor 
<NhsukTaskList
    IdPrefix="your-health"
    Items="@([
        new TaskListItemsItem
        {
            Heading = "Exercise",
            Href = "#/task/exercise",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = "Personal health",
            Href = "#/task/personal-health",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Completed",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = "Family health history",
            Hint = "Details of your parents, brothers and sisters",
            Href = "#/task/family-health-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = "Smoking history",
            Href = "#/task/smoking-history",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Incomplete",
                    Colour = "blue",
                },
            },
        },
        new TaskListItemsItem
        {
            Heading = "Blood test",
            Status = new TaskListItemsStatusOptions
            {
                Tag = new TagOptions
                {
                    Text = "Cannot start yet",
                    Border = false,
                    Colour = "false",
                    Classes = "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour",
                },
            },
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/task-list/macro.njk" import taskList %}

{{ taskList({
  "idPrefix": "your-health",
  "items": [
    {
      "heading": "Exercise",
      "href": "#/task/exercise",
      "status": {
        "tag": {
          "text": "Completed",
          "border": false,
          "colour": false,
          "classes": "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      "heading": "Personal health",
      "href": "#/task/personal-health",
      "status": {
        "tag": {
          "text": "Completed",
          "border": false,
          "colour": false,
          "classes": "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      "heading": "Family health history",
      "hint": "Details of your parents, brothers and sisters",
      "href": "#/task/family-health-history",
      "status": {
        "tag": {
          "text": "Incomplete",
          "colour": "blue"
        }
      }
    },
    {
      "heading": "Smoking history",
      "href": "#/task/smoking-history",
      "status": {
        "tag": {
          "text": "Incomplete",
          "colour": "blue"
        }
      }
    },
    {
      "heading": "Blood test",
      "status": {
        "tag": {
          "text": "Cannot start yet",
          "border": false,
          "colour": false,
          "classes": "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour"
        }
      }
    }
  ]
}) }}

With headings and status text as strings

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-task-list
    id-prefix="your-health"
    items="@([
        new TaskListItemsItem
        {
            Heading = "Exercise",
            Href = "#/task/exercise",
            Status = "Not applicable",
        },
        new TaskListItemsItem
        {
            Heading = "Personal health",
            Href = "#/task/personal-health",
            Status = "Not applicable",
        },
        new TaskListItemsItem
        {
            Heading = "Blood test",
            Href = "#/task/blood-test",
            Status = "Not applicable",
        },
    ])"
/>
Blazor 
<NhsukTaskList
    IdPrefix="your-health"
    Items="@([
        new TaskListItemsItem
        {
            Heading = "Exercise",
            Href = "#/task/exercise",
            Status = "Not applicable",
        },
        new TaskListItemsItem
        {
            Heading = "Personal health",
            Href = "#/task/personal-health",
            Status = "Not applicable",
        },
        new TaskListItemsItem
        {
            Heading = "Blood test",
            Href = "#/task/blood-test",
            Status = "Not applicable",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/task-list/macro.njk" import taskList %}

{{ taskList({
  "idPrefix": "your-health",
  "items": [
    {
      "heading": "Exercise",
      "href": "#/task/exercise",
      "status": "Not applicable"
    },
    {
      "heading": "Personal health",
      "href": "#/task/personal-health",
      "status": "Not applicable"
    },
    {
      "heading": "Blood test",
      "href": "#/task/blood-test",
      "status": "Not applicable"
    }
  ]
}) }}