ComponentAction link

7 of 7 upstream examples match. Razor component: <NhsukActionLink>

Default

Matches upstream

Razor Pages and MVC

<nhsuk-action-link text="Find your nearest A&E" href="#/find" />

Blazor

<NhsukActionLink Text="Find your nearest A&E" Href="#/find" />

Nunjucks (upstream)

{% from "nhsuk/components/action-link/macro.njk" import actionLink %}

{{ actionLink({
  "text": "Find your nearest A&E",
  "href": "#/find"
}) }}

Default

Matches upstream

reverse

Open on its own page (opens in new tab)

Find your nearest A&E

Razor Pages and MVC

<nhsuk-action-link text="Find your nearest A&E" href="#/find" variant="reverse" />

Blazor

<NhsukActionLink Text="Find your nearest A&E" Href="#/find" Variant="reverse" />

Nunjucks (upstream)

{% from "nhsuk/components/action-link/macro.njk" import actionLink %}

{{ actionLink({
  "text": "Find your nearest A&E",
  "href": "#/find",
  "variant": "reverse"
}) }}

With HTML

Matches upstream

Open on its own page (opens in new tab)

Start session
(11 cases)

Razor Pages and MVC

<nhsuk-action-link
    html=@(@"Start session<br>
<span class=""nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19"">(11 cases)</span>")
    href="#/start"
/>

Blazor

<NhsukActionLink
    Html=@(@"Start session<br>
<span class=""nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19"">(11 cases)</span>")
    Href="#/start"
/>

Nunjucks (upstream)

{% from "nhsuk/components/action-link/macro.njk" import actionLink %}

{{ actionLink({
  "html": "Start session<br>\n<span class=\"nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19\">(11 cases)</span>",
  "href": "#/start"
}) }}

With HTML

Matches upstream

reverse

Open on its own page (opens in new tab)

Start session
(11 cases)

Razor Pages and MVC

<nhsuk-action-link
    html=@(@"Start session<br>
<span class=""nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19"">(11 cases)</span>")
    href="#/start"
    variant="reverse"
/>

Blazor

<NhsukActionLink
    Html=@(@"Start session<br>
<span class=""nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19"">(11 cases)</span>")
    Href="#/start"
    Variant="reverse"
/>

Nunjucks (upstream)

{% from "nhsuk/components/action-link/macro.njk" import actionLink %}

{{ actionLink({
  "html": "Start session<br>\n<span class=\"nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19\">(11 cases)</span>",
  "href": "#/start",
  "variant": "reverse"
}) }}

With HTML via call block

Matches upstream

Open on its own page (opens in new tab)

Start session
(11 cases)

Razor Pages and MVC

<nhsuk-action-link href="#/start">
    Start session<br>
    <span class="nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19">(11 cases)</span>
</nhsuk-action-link>

Blazor

<NhsukActionLink Href="#/start">
    Start session<br>
    <span class="nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19">(11 cases)</span>
</NhsukActionLink>

Nunjucks (upstream)

{% from "nhsuk/components/action-link/macro.njk" import actionLink %}

{% call actionLink({
  "href": "#/start"
}) %}
  Start session<br>
<span class="nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19">(11 cases)</span>
{% endcall %}

As a button

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-action-link text="Find your nearest A&E" type="submit" />

Blazor

<NhsukActionLink Text="Find your nearest A&E" Type="submit" />

Nunjucks (upstream)

{% from "nhsuk/components/action-link/macro.njk" import actionLink %}

{{ actionLink({
  "text": "Find your nearest A&E",
  "type": "submit"
}) }}

As a button

Matches upstream

reverse

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-action-link text="Find your nearest A&E" type="submit" variant="reverse" />

Blazor

<NhsukActionLink Text="Find your nearest A&E" Type="submit" Variant="reverse" />

Nunjucks (upstream)

{% from "nhsuk/components/action-link/macro.njk" import actionLink %}

{{ actionLink({
  "text": "Find your nearest A&E",
  "type": "submit",
  "variant": "reverse"
}) }}