Fieldset - Zoskupenie polí

Zoskupenie polí

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    Aká je Vaša adresa?
  </legend>
</fieldset>

Makro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Aká je Vaša adresa?"
  }
}) }}

Zoskupenie polí zobrazené ako extra veľký text

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
    Aká je Vaša adresa?
  </legend>
</fieldset>

Makro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Aká je Vaša adresa?",
    classes: "govuk-fieldset__legend--xl"
  }
}) }}

Zoskupenie polí zobrazené ako veľký text

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    Aká je Vaša adresa?
  </legend>
</fieldset>

Makro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Aká je Vaša adresa?",
    classes: "govuk-fieldset__legend--l"
  }
}) }}

Zoskupenie polí zobrazené ako stredný text

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
    Aká je Vaša adresa?
  </legend>
</fieldset>

Makro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Aká je Vaša adresa?",
    classes: "govuk-fieldset__legend--m"
  }
}) }}

Zoskupenie polí zobrazené ako malý text

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
    Aká je Vaša adresa?
  </legend>
</fieldset>

Makro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Aká je Vaša adresa?",
    classes: "govuk-fieldset__legend--s"
  }
}) }}

Zoskupenie polí zobrazené ako extra veľký nadpis

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
    <h1 class="govuk-fieldset__heading">
      Aká je Vaša adresa?
    </h1>
  </legend>
</fieldset>

Makro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Aká je Vaša adresa?",
    classes: "govuk-fieldset__legend--xl",
    isPageHeading: true
  }
}) }}

Zoskupenie polí zobrazené ako veľký nadpis

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    <h1 class="govuk-fieldset__heading">
      Aká je Vaša adresa?
    </h1>
  </legend>
</fieldset>

Makro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Aká je Vaša adresa?",
    classes: "govuk-fieldset__legend--l",
    isPageHeading: true
  }
}) }}

Zoskupenie polí zobrazené ako stredne veľký nadpis

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
    <h1 class="govuk-fieldset__heading">
      Aká je Vaša adresa?
    </h1>
  </legend>
</fieldset>

Makro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Aká je Vaša adresa?",
    classes: "govuk-fieldset__legend--m",
    isPageHeading: true
  }
}) }}

Zoskupenie polí zobrazené ako extra malý nadpis

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
    <h1 class="govuk-fieldset__heading">
      Aká je Vaša adresa?
    </h1>
  </legend>
</fieldset>

Makro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Aká je Vaša adresa?",
    classes: "govuk-fieldset__legend--s",
    isPageHeading: true
  }
}) }}

Zoskupenie polí zobrazené ako nadpis bez štýlu

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    <h1 class="govuk-fieldset__heading">
      Aká je Vaša adresa?
    </h1>
  </legend>
</fieldset>

Makro

{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

{{ govukFieldset({
  legend: {
    text: "Aká je Vaša adresa?",
    isPageHeading: true
  }
}) }}