Signpost - GOV.UK Frontend

Rázcestník

Otvoriť príklad na novej záložke: rázcestník

Code

Markup






<a class='govuk-signpost govuk-signpost__card {%- if vertical %} govuk-signpost__card--vertical {% endif %} govuk-signpost__link' href="#">
    <div class='govuk-signpost__container'>
        <div>
            <h3 class='govuk-signpost__title' >Dlhý nadpis</h3>
            <p class='govuk-signpost__description'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
        </div>
    </div>
</a>

Macro

{% from "govuk/components/signpost/macro.njk" import govukSignpost %}

{{ govukSignpost({
  asLink: true
}) }}

Rázcestník with action

Otvoriť príklad na novej záložke: rázcestník with action

Code

Markup






<div class='govuk-signpost govuk-signpost__card {%- if vertical %} govuk-signpost__card--vertical {% endif %}' href="#">
    <div class='govuk-signpost__container'>
        <div>
            <h3 class='govuk-signpost__title'  id='signWithAction' >Dlhý nadpis</h3>
            <p class='govuk-signpost__description'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
            <div class='govuk-signpost__actions'>
                <button class="govuk-button govuk-button__basic" aria-labelledby="signWithAction">
      Akcia
    </button>
            </div>
        </div>
    </div>
</div>

Macro

{% from "govuk/components/signpost/macro.njk" import govukSignpost %}

{{ govukSignpost({
  title: "Dlhý nadpis",
  titleId: "signWithAction",
  actions:
    '<button class="govuk-button govuk-button__basic" aria-labelledby="signWithAction">\n' +
    "  Akcia\n" +
    "</button>\n"
}) }}

Rázcestník with icon

Otvoriť príklad na novej záložke: rázcestník with icon

Code

Markup






<a class='govuk-signpost govuk-signpost__card {%- if vertical %} govuk-signpost__card--vertical {% endif %} govuk-signpost__link' href="#">
        <div class='govuk-signpost__icon govuk-signpost__icon--vertical '>
            <span class="material-icons" aria-hidden="true">home</span>
        </div>
    <div class='govuk-signpost__container'>
        <div>
            <h3 class='govuk-signpost__title' >Dlhý nadpis</h3>
            <p class='govuk-signpost__description'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
        </div>
    </div>
</a>

Macro

{% from "govuk/components/signpost/macro.njk" import govukSignpost %}

{{ govukSignpost({
  icon: '<span class="material-icons" aria-hidden="true">home</span>\n',
  asLink: true
}) }}

Rázcestník with picture

Otvoriť príklad na novej záložke: rázcestník with picture

Code

Markup






<a class='govuk-signpost govuk-signpost__card {%- if vertical %} govuk-signpost__card--vertical {% endif %} govuk-signpost__link' href="#">
    <div class='govuk-signpost__container'>
        <div>
            <img src='https://www.pulsecarshalton.co.uk/wp-content/uploads/2016/08/jk-placeholder-image.jpg' class='govuk-signpost__image' alt='placeholder'/>
            <h3 class='govuk-signpost__title' >Dlhý nadpis</h3>
            <p class='govuk-signpost__description'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
        </div>
    </div>
</a>

Macro

{% from "govuk/components/signpost/macro.njk" import govukSignpost %}

{{ govukSignpost({
  image:
    "https://www.pulsecarshalton.co.uk/wp-content/uploads/2016/08/jk-placeholder-image.jpg",
  asLink: true
}) }}

Rázcestník horizontal

Otvoriť príklad na novej záložke: rázcestník horizontal

Code

Markup






<a class='govuk-signpost govuk-signpost__card {%- if vertical %} govuk-signpost__card--vertical {% endif %} govuk-signpost__link' href="#">
        <div class='govuk-signpost__icon'>
            <span class="material-icons" aria-hidden="true">home</span>
        </div>
    <div class='govuk-signpost__container'>
        <div>
            <h3 class='govuk-signpost__title' >Dlhý nadpis</h3>
            <p class='govuk-signpost__description'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
        </div>
    </div>
</a>

Macro

{% from "govuk/components/signpost/macro.njk" import govukSignpost %}

{{ govukSignpost({
  icon: '<span class="material-icons" aria-hidden="true">home</span>\n',
  layout: "horizontal",
  asLink: true
}) }}

Rázcestník horizontal with arrow

Otvoriť príklad na novej záložke: rázcestník horizontal with arrow

Code

Markup






<a class='govuk-signpost govuk-signpost__card {%- if vertical %} govuk-signpost__card--vertical {% endif %} govuk-signpost__link' href="#">
        <div class='govuk-signpost__icon'>
            <span class="material-icons" aria-hidden="true">home</span>
        </div>
    <div class='govuk-signpost__container'>
        <div>
            <h3 class='govuk-signpost__title' >Dlhý nadpis</h3>
            <p class='govuk-signpost__description'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
        </div>
            <div class='govuk-signpost__arrow-icon'>
                <span class="material-icons" aria-hidden="true">east</span>
            </div>
    </div>
</a>

Macro

{% from "govuk/components/signpost/macro.njk" import govukSignpost %}

{{ govukSignpost({
  icon: '<span class="material-icons" aria-hidden="true">home</span>\n',
  layout: "horizontal",
  withArrow: true,
  asLink: true
}) }}

Rázcestník text

Otvoriť príklad na novej záložke: rázcestník text

Code

Markup






<div class='govuk-signpost govuk-signpost__card--text' href="#">
    <div class='govuk-signpost__container'>
        <div>
 <a href="#">             <h3 class='govuk-signpost__title' >Dlhý nadpis</h3>
 <a/>             <p class='govuk-signpost__description'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
        </div>
    </div>
</div>

Macro

{% from "govuk/components/signpost/macro.njk" import govukSignpost %}

{{ govukSignpost({
  layout: "text"
}) }}

Rázcestník text with subtitle

Otvoriť príklad na novej záložke: rázcestník text with subtitle

Code

Markup






<div class='govuk-signpost govuk-signpost__card--text' href="#">
    <div class='govuk-signpost__container'>
        <div>
 <a href="#">             <h3 class='govuk-signpost__title' >Dlhý nadpis</h3>
 <a/>             <p class='govuk-signpost__subtitle'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente.</p>
            <p class='govuk-signpost__description'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
        </div>
    </div>
</div>

Macro

{% from "govuk/components/signpost/macro.njk" import govukSignpost %}

{{ govukSignpost({
  layout: "text",
  subtitle:
    "Tento text slúži iba ako ukážka naplneného obsahu v danom komponente."
}) }}

Rázcestník text with link

Otvoriť príklad na novej záložke: rázcestník text with link

Code

Markup






<div class='govuk-signpost govuk-signpost__card--text' href="#">
    <div class='govuk-signpost__container'>
        <div>
 <a href="#">             <h3 class='govuk-signpost__title' >Dlhý nadpis</h3>
 <a/>             <p class='govuk-signpost__description'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
            <div class='govuk-signpost__actions'>
                <a href="#" class='govuk-link'>Hypertextovy link</a>
            </div>
        </div>
    </div>
</div>

Macro

{% from "govuk/components/signpost/macro.njk" import govukSignpost %}

{{ govukSignpost({
  layout: "text",
  actions: `<a href="#" class='govuk-link'>Hypertextovy link</a>\n`
}) }}

Rázcestník text with tag

Otvoriť príklad na novej záložke: rázcestník text with tag

Code

Markup






<div class='govuk-signpost govuk-signpost__card--text' href="#">
    <div class='govuk-signpost__container'>
        <div>
 <a href="#">             <h3 class='govuk-signpost__title' >Dlhý nadpis</h3>
 <a/>             <p class='govuk-signpost__description'>Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.</p>
            <p class='govuk-signpost__tag'>1.1. 2020   —   Tag 1   |  Tag 2  |  Tag 3</p>
        </div>
    </div>
</div>

Macro

{% from "govuk/components/signpost/macro.njk" import govukSignpost %}

{{ govukSignpost({
  layout: "text",
  tag: "1.1. 2020   —   Tag 1   |  Tag 2  |  Tag 3"
}) }}

Signpost - Rázcestník

Rázcestník

Markup

Macro

Rázcestník with action

Markup

Macro

Rázcestník with icon

Markup

Macro

Rázcestník with picture

Markup

Macro

Rázcestník horizontal

Markup

Macro

Rázcestník horizontal with arrow

Markup

Macro

Rázcestník text

Markup

Macro

Rázcestník text with subtitle

Markup

Macro

Rázcestník text with link

Markup

Macro

Rázcestník text with tag

Markup

Macro