Fieldset - Zoskupenie polí

Zoskupenie polí

Otvoriť príklad na novej záložke

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    What is your address?
  </legend>
</fieldset>

Macro

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

{{ govukFieldset({
  legend: {
    text: "What is your address?"
  }
}) }}

Zoskupenie polí styled as xl text

Otvoriť príklad na novej záložke

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
    What is your address?
  </legend>
</fieldset>

Macro

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

{{ govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--xl"
  }
}) }}

Zoskupenie polí styled as large text

Otvoriť príklad na novej záložke

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    What is your address?
  </legend>
</fieldset>

Macro

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

{{ govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--l"
  }
}) }}

Zoskupenie polí styled as medium text

Otvoriť príklad na novej záložke

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
    What is your address?
  </legend>
</fieldset>

Macro

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

{{ govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--m"
  }
}) }}

Zoskupenie polí styled as small text

Otvoriť príklad na novej záložke

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
    What is your address?
  </legend>
</fieldset>

Macro

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

{{ govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--s"
  }
}) }}

Zoskupenie polí as page heading xl

Otvoriť príklad na novej záložke

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
    <h1 class="govuk-fieldset__heading">
      What is your address?
    </h1>
  </legend>
</fieldset>

Macro

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

{{ govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--xl",
    isPageHeading: true
  }
}) }}

Zoskupenie polí as page heading l

Otvoriť príklad na novej záložke

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    <h1 class="govuk-fieldset__heading">
      What is your address?
    </h1>
  </legend>
</fieldset>

Macro

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

{{ govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--l",
    isPageHeading: true
  }
}) }}

Zoskupenie polí as page heading m

Otvoriť príklad na novej záložke

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
    <h1 class="govuk-fieldset__heading">
      What is your address?
    </h1>
  </legend>
</fieldset>

Macro

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

{{ govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--m",
    isPageHeading: true
  }
}) }}

Zoskupenie polí as page heading s

Otvoriť príklad na novej záložke

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
    <h1 class="govuk-fieldset__heading">
      What is your address?
    </h1>
  </legend>
</fieldset>

Macro

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

{{ govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--s",
    isPageHeading: true
  }
}) }}

Zoskupenie polí as page heading without class

Otvoriť príklad na novej záložke

Code

Markup

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    <h1 class="govuk-fieldset__heading">
      What is your address?
    </h1>
  </legend>
</fieldset>

Macro

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

{{ govukFieldset({
  legend: {
    text: "What is your address?",
    isPageHeading: true
  }
}) }}