Skip to main content
All components

ComponentPanel

15 of 15 upstream examples match. Razor component: <NhsukPanel>

Hide the 1 test-only examples

Default

Matches upstream

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel heading="Booking complete" text="We have sent you a confirmation email" />
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
    })"
    Text="We have sent you a confirmation email"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Booking complete"
  },
  "text": "We have sent you a confirmation email"
}) }}

Heading

Matches upstream

with size M

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel
    heading-options="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Size = "m",
    })"
    text="We have sent you a confirmation email"
/>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Size = "m",
    })"
    Text="We have sent you a confirmation email"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Booking complete",
    "size": "m"
  },
  "text": "We have sent you a confirmation email"
}) }}

Heading

Matches upstream

with size L

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel
    heading-options="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Size = "l",
    })"
    text="We have sent you a confirmation email"
/>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Size = "l",
    })"
    Text="We have sent you a confirmation email"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Booking complete",
    "size": "l"
  },
  "text": "We have sent you a confirmation email"
}) }}

Heading

Matches upstream

with size XL

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel
    heading-options="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Size = "xl",
    })"
    text="We have sent you a confirmation email"
/>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Size = "xl",
    })"
    Text="We have sent you a confirmation email"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Booking complete",
    "size": "xl"
  },
  "text": "We have sent you a confirmation email"
}) }}

Heading

Matches upstream

with id attribute on

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel
    heading-options="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Size = "l",
        Id = "custom-id",
    })"
    text="We have sent you a confirmation email"
/>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Size = "l",
        Id = "custom-id",
    })"
    Text="We have sent you a confirmation email"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Booking complete",
    "size": "l",
    "id": "custom-id"
  },
  "text": "We have sent you a confirmation email"
}) }}

Interruption

Matches upstream

Open on its own page (opens in new tab)

Jodie Brown had a COVID-19 vaccine less than 3 months ago

They had a COVID-19 vaccine on 25 September 2025.

For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months.

Continue anyway Cancel
Razor Pages and MVC 
<nhsuk-panel
    heading-options="@(new PanelHeadingOptions
    {
        Text = "Jodie Brown had a COVID-19 vaccine less than 3 months ago",
        Size = "l",
    })"
    variant="interruption"
    html=@(@"<p>They had a COVID-19 vaccine on 25 September 2025.</p>
<p>For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months.</p>
<div class=""nhsuk-button-group"">
  <a class=""nhsuk-button nhsuk-button--reverse"" data-module=""nhsuk-button"" href=""#"" role=""button"" draggable=""false"">
  Continue anyway
</a>

  <a href=""#"">Cancel</a>
</div>")
/>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Jodie Brown had a COVID-19 vaccine less than 3 months ago",
        Size = "l",
    })"
    Variant="interruption"
    Html=@(@"<p>They had a COVID-19 vaccine on 25 September 2025.</p>
<p>For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months.</p>
<div class=""nhsuk-button-group"">
  <a class=""nhsuk-button nhsuk-button--reverse"" data-module=""nhsuk-button"" href=""#"" role=""button"" draggable=""false"">
  Continue anyway
</a>

  <a href=""#"">Cancel</a>
</div>")
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Jodie Brown had a COVID-19 vaccine less than 3 months ago",
    "size": "l"
  },
  "variant": "interruption",
  "html": "<p>They had a COVID-19 vaccine on 25 September 2025.</p>\n<p>For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months.</p>\n<div class=\"nhsuk-button-group\">\n  <a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Continue anyway\n</a>\n\n  <a href=\"#\">Cancel</a>\n</div>"
}) }}

Interruption for confirmation to cancel

Matches upstream

Open on its own page (opens in new tab)

Confirm you want to cancel your hospital appointment

You will be able to reschedule your appointment for another time, but this may delay your treatment.

Cancelling your appointment cannot be undone.

Cancel appointment Change my weight
Razor Pages and MVC 
<nhsuk-panel
    heading-options="@(new PanelHeadingOptions
    {
        Text = "Confirm you want to cancel your hospital appointment",
        Size = "l",
    })"
    variant="interruption"
    html=@(@"<p>You will be able to reschedule your appointment for another time, but this may delay your treatment.</p>
<p>Cancelling your appointment cannot be undone.</p>
<div class=""nhsuk-button-group"">
  <a class=""nhsuk-button nhsuk-button--reverse"" data-module=""nhsuk-button"" href=""#"" role=""button"" draggable=""false"">
  Cancel appointment
</a>

  <a href=""#"">Change my weight</a>
</div>")
/>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Confirm you want to cancel your hospital appointment",
        Size = "l",
    })"
    Variant="interruption"
    Html=@(@"<p>You will be able to reschedule your appointment for another time, but this may delay your treatment.</p>
<p>Cancelling your appointment cannot be undone.</p>
<div class=""nhsuk-button-group"">
  <a class=""nhsuk-button nhsuk-button--reverse"" data-module=""nhsuk-button"" href=""#"" role=""button"" draggable=""false"">
  Cancel appointment
</a>

  <a href=""#"">Change my weight</a>
</div>")
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Confirm you want to cancel your hospital appointment",
    "size": "l"
  },
  "variant": "interruption",
  "html": "<p>You will be able to reschedule your appointment for another time, but this may delay your treatment.</p>\n<p>Cancelling your appointment cannot be undone.</p>\n<div class=\"nhsuk-button-group\">\n  <a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Cancel appointment\n</a>\n\n  <a href=\"#\">Change my weight</a>\n</div>"
}) }}

Interruption for confirmation to continue

Matches upstream

Open on its own page (opens in new tab)

Is your weight correct?

You entered your weight as 21.4 kilograms. This is lower than expected.

Yes, this is correct Change my weight
Razor Pages and MVC 
<nhsuk-panel
    heading-options="@(new PanelHeadingOptions
    {
        Text = "Is your weight correct?",
        Size = "l",
    })"
    variant="interruption"
    html=@(@"<p>You entered your weight as <b>21.4 kilograms</b>. This is lower than expected.</p>
<div class=""nhsuk-button-group"">
  <a class=""nhsuk-button nhsuk-button--reverse"" data-module=""nhsuk-button"" href=""#"" role=""button"" draggable=""false"">
  Yes, this is correct
</a>

  <a href=""#"">Change my weight</a>
</div>")
/>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Is your weight correct?",
        Size = "l",
    })"
    Variant="interruption"
    Html=@(@"<p>You entered your weight as <b>21.4 kilograms</b>. This is lower than expected.</p>
<div class=""nhsuk-button-group"">
  <a class=""nhsuk-button nhsuk-button--reverse"" data-module=""nhsuk-button"" href=""#"" role=""button"" draggable=""false"">
  Yes, this is correct
</a>

  <a href=""#"">Change my weight</a>
</div>")
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Is your weight correct?",
    "size": "l"
  },
  "variant": "interruption",
  "html": "<p>You entered your weight as <b>21.4 kilograms</b>. This is lower than expected.</p>\n<div class=\"nhsuk-button-group\">\n  <a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Yes, this is correct\n</a>\n\n  <a href=\"#\">Change my weight</a>\n</div>"
}) }}

With heading as string

Matches upstream

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel heading="Booking complete" text="We have sent you a confirmation email" />
Blazor 
<NhsukPanel
    Heading="@("Booking complete")"
    Text="We have sent you a confirmation email"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": "Booking complete",
  "text": "We have sent you a confirmation email"
}) }}

With heading classes

Matches upstream

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel
    heading-options="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Classes = "nhsuk-panel__heading--l",
    })"
    text="We have sent you a confirmation email"
/>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Classes = "nhsuk-panel__heading--l",
    })"
    Text="We have sent you a confirmation email"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Booking complete",
    "classes": "nhsuk-panel__heading--l"
  },
  "text": "We have sent you a confirmation email"
}) }}

With heading level 1

Matches upstream

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel
    heading-options="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Level = 1,
    })"
    text="We have sent you a confirmation email"
/>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Level = 1,
    })"
    Text="We have sent you a confirmation email"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Booking complete",
    "level": 1
  },
  "text": "We have sent you a confirmation email"
}) }}

With heading level 2

Matches upstream

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel
    heading-options="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Level = 2,
    })"
    text="We have sent you a confirmation email"
/>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Level = 2,
    })"
    Text="We have sent you a confirmation email"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Booking complete",
    "level": 2
  },
  "text": "We have sent you a confirmation email"
}) }}

With heading level 3

Matches upstream

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel
    heading-options="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Level = 3,
    })"
    text="We have sent you a confirmation email"
/>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
        Level = 3,
    })"
    Text="We have sent you a confirmation email"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Booking complete",
    "level": 3
  },
  "text": "We have sent you a confirmation email"
}) }}

With HTML

Matches upstream

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel heading="Booking complete" html="We have sent you a confirmation email" />
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
    })"
    Html="We have sent you a confirmation email"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{{ panel({
  "heading": {
    "text": "Booking complete"
  },
  "html": "We have sent you a confirmation email"
}) }}

With HTML via call block

Matches upstream

Open on its own page (opens in new tab)

Booking complete

We have sent you a confirmation email
Razor Pages and MVC 
<nhsuk-panel heading="Booking complete">
    We have sent you a confirmation email
</nhsuk-panel>
Blazor 
<NhsukPanel
    Heading="@(new PanelHeadingOptions
    {
        Text = "Booking complete",
    })"
>
    We have sent you a confirmation email
</NhsukPanel>
Nunjucks (upstream) 
{% from "nhsuk/components/panel/macro.njk" import panel %}

{% call panel({
  "heading": {
    "text": "Booking complete"
  }
}) %}
  We have sent you a confirmation email
{% endcall %}