Fieldset

Default

Svelte code

<script>
	import { Fieldset } from '@danboscaro/govuk-svelte'
</script>

<Fieldset {...{
  legend: {
    text: "What is your address?"
  }
}} />

Styled as xl text

Svelte code

<script>
	import { Fieldset } from '@danboscaro/govuk-svelte'
</script>

<Fieldset {...{
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--xl"
  }
}} />

Styled as large text

Svelte code

<script>
	import { Fieldset } from '@danboscaro/govuk-svelte'
</script>

<Fieldset {...{
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--l"
  }
}} />

Styled as medium text

Svelte code

<script>
	import { Fieldset } from '@danboscaro/govuk-svelte'
</script>

<Fieldset {...{
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--m"
  }
}} />

Styled as small text

Svelte code

<script>
	import { Fieldset } from '@danboscaro/govuk-svelte'
</script>

<Fieldset {...{
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--s"
  }
}} />

As page heading xl

Svelte code

<script>
	import { Fieldset } from '@danboscaro/govuk-svelte'
</script>

<Fieldset {...{
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--xl",
    isPageHeading: true
  }
}} />

As page heading l

Svelte code

<script>
	import { Fieldset } from '@danboscaro/govuk-svelte'
</script>

<Fieldset {...{
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--l",
    isPageHeading: true
  }
}} />

As page heading m

Svelte code

<script>
	import { Fieldset } from '@danboscaro/govuk-svelte'
</script>

<Fieldset {...{
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--m",
    isPageHeading: true
  }
}} />

As page heading s

Svelte code

<script>
	import { Fieldset } from '@danboscaro/govuk-svelte'
</script>

<Fieldset {...{
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--s",
    isPageHeading: true
  }
}} />

As page heading without class

Svelte code

<script>
	import { Fieldset } from '@danboscaro/govuk-svelte'
</script>

<Fieldset {...{
  legend: {
    text: "What is your address?",
    isPageHeading: true
  }
}} />