Skip to main content
All components

ComponentDo and Don't list

12 of 12 upstream examples match. Razor component: <NhsukDoDontList>

(do) with custom prefix

Matches upstream

Open on its own page (opens in new tab)

Do

  • always cover blisters with a soft plaster or padded dressing
  • always wash your hands before touching a burst blister
  • always allow the fluid in a burst blister to drain before covering it with a plaster or dressing
Razor Pages and MVC 
<nhsuk-do-dont-list
    heading="Do"
    icon="tick"
    prefix-text="always"
    items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
/>
Blazor 
<NhsukDoDontList
    Heading="@(new DoDontListHeadingOptions
    {
        Text = "Do",
    })"
    Icon="tick"
    PrefixText="always"
    Items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "heading": {
    "text": "Do"
  },
  "icon": "tick",
  "prefixText": "always",
  "items": [
    {
      "text": "cover blisters with a soft plaster or padded dressing"
    },
    {
      "text": "wash your hands before touching a burst blister"
    },
    {
      "text": "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
    }
  ]
}) }}

(do) with deprecated options

Matches upstream

Open on its own page (opens in new tab)

Do

  • cover blisters with a soft plaster or padded dressing
  • wash your hands before touching a burst blister
  • allow the fluid in a burst blister to drain before covering it with a plaster or dressing
Razor Pages and MVC 
<nhsuk-do-dont-list
    icon="tick"
    items="@([
        new DoDontListItemsItem
        {
            Item = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Item = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Item = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
    options="@(new DoDontListOptions
    {
        Title = "Do",
    })"
/>
Blazor 
<NhsukDoDontList
    Title="Do"
    Icon="tick"
    Items="@([
        new DoDontListItemsItem
        {
            Item = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Item = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Item = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "title": "Do",
  "icon": "tick",
  "items": [
    {
      "item": "cover blisters with a soft plaster or padded dressing"
    },
    {
      "item": "wash your hands before touching a burst blister"
    },
    {
      "item": "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
    }
  ]
}) }}

(do) with empty items

Matches upstream

Open on its own page (opens in new tab)

Do

  • cover blisters with a soft plaster or padded dressing
  • wash your hands before touching a burst blister
Razor Pages and MVC 
<nhsuk-do-dont-list
    heading="Do"
    icon="tick"
    items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        null,
    ])"
/>
Blazor 
<NhsukDoDontList
    Heading="@(new DoDontListHeadingOptions
    {
        Text = "Do",
    })"
    Icon="tick"
    Items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        null,
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "heading": {
    "text": "Do"
  },
  "icon": "tick",
  "items": [
    {
      "text": "cover blisters with a soft plaster or padded dressing"
    },
    {
      "text": "wash your hands before touching a burst blister"
    },
    false
  ]
}) }}

(don't)

Matches upstream

Open on its own page (opens in new tab)

Don't

  • do not burst a blister yourself
  • do not peel the skin off a burst blister
  • do not pick at the edges of the remaining skin
  • do not wear the shoes or use the equipment that caused your blister until it heals
Razor Pages and MVC 
<nhsuk-do-dont-list
    heading="Don't"
    icon="cross"
    items="@([
        new DoDontListItemsItem
        {
            Text = "burst a blister yourself",
        },
        new DoDontListItemsItem
        {
            Text = "peel the skin off a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "pick at the edges of the remaining skin",
        },
        new DoDontListItemsItem
        {
            Text = "wear the shoes or use the equipment that caused your blister until it heals",
        },
    ])"
/>
Blazor 
<NhsukDoDontList
    Heading="@(new DoDontListHeadingOptions
    {
        Text = "Don't",
    })"
    Icon="cross"
    Items="@([
        new DoDontListItemsItem
        {
            Text = "burst a blister yourself",
        },
        new DoDontListItemsItem
        {
            Text = "peel the skin off a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "pick at the edges of the remaining skin",
        },
        new DoDontListItemsItem
        {
            Text = "wear the shoes or use the equipment that caused your blister until it heals",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "heading": {
    "text": "Don't"
  },
  "icon": "cross",
  "items": [
    {
      "text": "burst a blister yourself"
    },
    {
      "text": "peel the skin off a burst blister"
    },
    {
      "text": "pick at the edges of the remaining skin"
    },
    {
      "text": "wear the shoes or use the equipment that caused your blister until it heals"
    }
  ]
}) }}

(don't) with custom prefix

Matches upstream

Open on its own page (opens in new tab)

Never

  • never burst a blister yourself
  • never peel the skin off a burst blister
  • never pick at the edges of the remaining skin
  • never wear the shoes or use the equipment that caused your blister until it heals
Razor Pages and MVC 
<nhsuk-do-dont-list
    heading="Never"
    icon="cross"
    prefix-text="never"
    items="@([
        new DoDontListItemsItem
        {
            Text = "burst a blister yourself",
        },
        new DoDontListItemsItem
        {
            Text = "peel the skin off a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "pick at the edges of the remaining skin",
        },
        new DoDontListItemsItem
        {
            Text = "wear the shoes or use the equipment that caused your blister until it heals",
        },
    ])"
/>
Blazor 
<NhsukDoDontList
    Heading="@(new DoDontListHeadingOptions
    {
        Text = "Never",
    })"
    Icon="cross"
    PrefixText="never"
    Items="@([
        new DoDontListItemsItem
        {
            Text = "burst a blister yourself",
        },
        new DoDontListItemsItem
        {
            Text = "peel the skin off a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "pick at the edges of the remaining skin",
        },
        new DoDontListItemsItem
        {
            Text = "wear the shoes or use the equipment that caused your blister until it heals",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "heading": {
    "text": "Never"
  },
  "icon": "cross",
  "prefixText": "never",
  "items": [
    {
      "text": "burst a blister yourself"
    },
    {
      "text": "peel the skin off a burst blister"
    },
    {
      "text": "pick at the edges of the remaining skin"
    },
    {
      "text": "wear the shoes or use the equipment that caused your blister until it heals"
    }
  ]
}) }}

(don't) with deprecated options

Matches upstream

Open on its own page (opens in new tab)

Don't

  • do not burst a blister yourself
  • do not peel the skin off a burst blister
  • do not pick at the edges of the remaining skin
  • do not wear the shoes or use the equipment that caused your blister until it heals
Razor Pages and MVC 
<nhsuk-do-dont-list
    icon="cross"
    items="@([
        new DoDontListItemsItem
        {
            Item = "burst a blister yourself",
        },
        new DoDontListItemsItem
        {
            Item = "peel the skin off a burst blister",
        },
        new DoDontListItemsItem
        {
            Item = "pick at the edges of the remaining skin",
        },
        new DoDontListItemsItem
        {
            Item = "wear the shoes or use the equipment that caused your blister until it heals",
        },
    ])"
    options="@(new DoDontListOptions
    {
        Title = "Don't",
    })"
/>
Blazor 
<NhsukDoDontList
    Title="Don't"
    Icon="cross"
    Items="@([
        new DoDontListItemsItem
        {
            Item = "burst a blister yourself",
        },
        new DoDontListItemsItem
        {
            Item = "peel the skin off a burst blister",
        },
        new DoDontListItemsItem
        {
            Item = "pick at the edges of the remaining skin",
        },
        new DoDontListItemsItem
        {
            Item = "wear the shoes or use the equipment that caused your blister until it heals",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "title": "Don't",
  "icon": "cross",
  "items": [
    {
      "item": "burst a blister yourself"
    },
    {
      "item": "peel the skin off a burst blister"
    },
    {
      "item": "pick at the edges of the remaining skin"
    },
    {
      "item": "wear the shoes or use the equipment that caused your blister until it heals"
    }
  ]
}) }}

(don't) with empty items

Matches upstream

Open on its own page (opens in new tab)

Don't

  • do not burst a blister yourself
  • do not peel the skin off a burst blister
  • do not pick at the edges of the remaining skin
Razor Pages and MVC 
<nhsuk-do-dont-list
    heading="Don't"
    icon="cross"
    items="@([
        new DoDontListItemsItem
        {
            Text = "burst a blister yourself",
        },
        new DoDontListItemsItem
        {
            Text = "peel the skin off a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "pick at the edges of the remaining skin",
        },
        null,
    ])"
/>
Blazor 
<NhsukDoDontList
    Heading="@(new DoDontListHeadingOptions
    {
        Text = "Don't",
    })"
    Icon="cross"
    Items="@([
        new DoDontListItemsItem
        {
            Text = "burst a blister yourself",
        },
        new DoDontListItemsItem
        {
            Text = "peel the skin off a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "pick at the edges of the remaining skin",
        },
        null,
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "heading": {
    "text": "Don't"
  },
  "icon": "cross",
  "items": [
    {
      "text": "burst a blister yourself"
    },
    {
      "text": "peel the skin off a burst blister"
    },
    {
      "text": "pick at the edges of the remaining skin"
    },
    false
  ]
}) }}

(don't) with hidden prefix

Matches upstream

Open on its own page (opens in new tab)

Don't

  • avoid bursting a blister yourself
  • certainly don't peel the skin off a burst blister
  • absolutely do not pick at the edges of the remaining skin
  • please don't wear the shoes or use the equipment that caused your blister until it heals
Razor Pages and MVC 
<nhsuk-do-dont-list
    heading="Don't"
    icon="cross"
    hide-prefix="true"
    items="@([
        new DoDontListItemsItem
        {
            Text = "avoid bursting a blister yourself",
        },
        new DoDontListItemsItem
        {
            Text = "certainly don't peel the skin off a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "absolutely do not pick at the edges of the remaining skin",
        },
        new DoDontListItemsItem
        {
            Text = "please don't wear the shoes or use the equipment that caused your blister until it heals",
        },
    ])"
/>
Blazor 
<NhsukDoDontList
    Heading="@(new DoDontListHeadingOptions
    {
        Text = "Don't",
    })"
    Icon="cross"
    HidePrefix="true"
    Items="@([
        new DoDontListItemsItem
        {
            Text = "avoid bursting a blister yourself",
        },
        new DoDontListItemsItem
        {
            Text = "certainly don't peel the skin off a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "absolutely do not pick at the edges of the remaining skin",
        },
        new DoDontListItemsItem
        {
            Text = "please don't wear the shoes or use the equipment that caused your blister until it heals",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "heading": {
    "text": "Don't"
  },
  "icon": "cross",
  "hidePrefix": true,
  "items": [
    {
      "text": "avoid bursting a blister yourself"
    },
    {
      "text": "certainly don't peel the skin off a burst blister"
    },
    {
      "text": "absolutely do not pick at the edges of the remaining skin"
    },
    {
      "text": "please don't wear the shoes or use the equipment that caused your blister until it heals"
    }
  ]
}) }}

Default

Matches upstream

Open on its own page (opens in new tab)

Do

  • cover blisters with a soft plaster or padded dressing
  • wash your hands before touching a burst blister
  • allow the fluid in a burst blister to drain before covering it with a plaster or dressing
Razor Pages and MVC 
<nhsuk-do-dont-list
    heading="Do"
    icon="tick"
    items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
/>
Blazor 
<NhsukDoDontList
    Heading="@(new DoDontListHeadingOptions
    {
        Text = "Do",
    })"
    Icon="tick"
    Items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "heading": {
    "text": "Do"
  },
  "icon": "tick",
  "items": [
    {
      "text": "cover blisters with a soft plaster or padded dressing"
    },
    {
      "text": "wash your hands before touching a burst blister"
    },
    {
      "text": "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
    }
  ]
}) }}

With heading as string

Matches upstream

Open on its own page (opens in new tab)

Do

  • cover blisters with a soft plaster or padded dressing
  • wash your hands before touching a burst blister
  • allow the fluid in a burst blister to drain before covering it with a plaster or dressing
Razor Pages and MVC 
<nhsuk-do-dont-list
    heading="Do"
    icon="tick"
    items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
/>
Blazor 
<NhsukDoDontList
    Heading="@("Do")"
    Icon="tick"
    Items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "heading": "Do",
  "icon": "tick",
  "items": [
    {
      "text": "cover blisters with a soft plaster or padded dressing"
    },
    {
      "text": "wash your hands before touching a burst blister"
    },
    {
      "text": "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
    }
  ]
}) }}

With heading level 1

Matches upstream

Open on its own page (opens in new tab)

Do

  • cover blisters with a soft plaster or padded dressing
  • wash your hands before touching a burst blister
  • allow the fluid in a burst blister to drain before covering it with a plaster or dressing
Razor Pages and MVC 
<nhsuk-do-dont-list
    heading-options="@(new DoDontListHeadingOptions
    {
        Text = "Do",
        Level = 1,
    })"
    icon="tick"
    items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
/>
Blazor 
<NhsukDoDontList
    Heading="@(new DoDontListHeadingOptions
    {
        Text = "Do",
        Level = 1,
    })"
    Icon="tick"
    Items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "heading": {
    "text": "Do",
    "level": 1
  },
  "icon": "tick",
  "items": [
    {
      "text": "cover blisters with a soft plaster or padded dressing"
    },
    {
      "text": "wash your hands before touching a burst blister"
    },
    {
      "text": "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
    }
  ]
}) }}

With heading level 2

Matches upstream

Open on its own page (opens in new tab)

Do

  • cover blisters with a soft plaster or padded dressing
  • wash your hands before touching a burst blister
  • allow the fluid in a burst blister to drain before covering it with a plaster or dressing
Razor Pages and MVC 
<nhsuk-do-dont-list
    heading-options="@(new DoDontListHeadingOptions
    {
        Text = "Do",
        Level = 2,
    })"
    icon="tick"
    items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
/>
Blazor 
<NhsukDoDontList
    Heading="@(new DoDontListHeadingOptions
    {
        Text = "Do",
        Level = 2,
    })"
    Icon="tick"
    Items="@([
        new DoDontListItemsItem
        {
            Text = "cover blisters with a soft plaster or padded dressing",
        },
        new DoDontListItemsItem
        {
            Text = "wash your hands before touching a burst blister",
        },
        new DoDontListItemsItem
        {
            Text = "allow the fluid in a burst blister to drain before covering it with a plaster or dressing",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/do-dont-list/macro.njk" import doDontList %}

{{ doDontList({
  "heading": {
    "text": "Do",
    "level": 2
  },
  "icon": "tick",
  "items": [
    {
      "text": "cover blisters with a soft plaster or padded dressing"
    },
    {
      "text": "wash your hands before touching a burst blister"
    },
    {
      "text": "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
    }
  ]
}) }}