Label

Default

Svelte code

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

<Label {...{
  text: "National Insurance number"
}} />

With bold text

Svelte code

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

<Label {...{
  classes: "govuk-label--s",
  text: "National Insurance number"
}} />

Styled as xl text

Svelte code

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

<Label {...{
  text: "National Insurance number",
  classes: "govuk-label--xl"
}} />

Styled as large text

Svelte code

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

<Label {...{
  text: "National Insurance number",
  classes: "govuk-label--l"
}} />

Styled as medium text

Svelte code

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

<Label {...{
  text: "National Insurance number",
  classes: "govuk-label--m"
}} />

Styled as small text

Svelte code

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

<Label {...{
  text: "National Insurance number",
  classes: "govuk-label--s"
}} />

As page heading xl

Svelte code

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

<Label {...{
  text: "National Insurance number",
  classes: "govuk-label--xl",
  isPageHeading: true
}} />

As page heading l

Svelte code

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

<Label {...{
  text: "National Insurance number",
  classes: "govuk-label--l",
  isPageHeading: true
}} />

As page heading m

Svelte code

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

<Label {...{
  text: "National Insurance number",
  classes: "govuk-label--m",
  isPageHeading: true
}} />

As page heading s

Svelte code

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

<Label {...{
  text: "National Insurance number",
  classes: "govuk-label--s",
  isPageHeading: true
}} />

As page heading without class

Svelte code

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

<Label {...{
  text: "National Insurance number",
  isPageHeading: true
}} />