ComponentPage template

5 of 5 upstream examples match. Razor component: <NhsukTemplate>

Default

Matches upstream

Page template examples render a whole page, so open them on their own page to see them.

Blazor

<NhsukTemplate>
    <h1 class="nhsuk-heading-xl">Page heading</h1>
</NhsukTemplate>

Nunjucks (upstream)

{% extends "nhsuk/template.njk" %}

With page variables

Matches upstream

Open on its own page (opens in new tab)

Page template examples render a whole page, so open them on their own page to see them.

Blazor

<NhsukTemplate
    HtmlLang="cy"
    HtmlClasses="app-html"
    HtmlAttributes="@(new NhsukAttributes
    {
        ["data-html"] = "yes",
    })"
    PageTitleLang="cy"
    ThemeColor="#330072"
    AssetPath="/static/nhsuk"
    AssetUrl="https://example.nhs.uk/static/nhsuk"
    BodyClasses="app-body"
    BodyAttributes="@(new NhsukAttributes
    {
        ["data-body"] = "yes",
    })"
    CspNonce="abc123"
    ContainerClasses="app-container"
    MainClasses="app-main"
    MainLang="cy"
>
    <p>Cynnwys</p>
</NhsukTemplate>

Nunjucks (upstream)

{% extends "nhsuk/template.njk" %}

With Open Graph image URL

Matches upstream

Open on its own page (opens in new tab)

Page template examples render a whole page, so open them on their own page to see them.

Blazor

<NhsukTemplate OpengraphImageUrl="https://example.nhs.uk/og.png" />

Nunjucks (upstream)

{% extends "nhsuk/template.njk" %}

With blocks

Matches upstream

Open on its own page (opens in new tab)

Page template examples render a whole page, so open them on their own page to see them.

Blazor

<NhsukTemplate>
    <PageTitle>Check your details – NHS App</PageTitle>
    <Head><link rel="stylesheet" href="/app.css"></Head>
    <BodyStart><div class="app-banner">Beta</div></BodyStart>
    <Header><header class="app-header">Custom header</header></Header>
    <BeforeContent><a class="nhsuk-back-link" href="/">Back</a></BeforeContent>
    <Footer><footer class="app-footer">Custom footer</footer></Footer>
    <BodyEnd><p>End</p></BodyEnd>
    <ChildContent><h1>Content</h1></ChildContent>
</NhsukTemplate>

Nunjucks (upstream)

{% extends "nhsuk/template.njk" %}

With replaced main and skip link

Matches upstream

Open on its own page (opens in new tab)

Page template examples render a whole page, so open them on their own page to see them.

Blazor

<NhsukTemplate>
    <SkipLink></SkipLink>
    <Main><main id="maincontent">Replaced</main></Main>
    <HeadIcons></HeadIcons>
</NhsukTemplate>

Nunjucks (upstream)

{% extends "nhsuk/template.njk" %}