NotificationBanner

Default

Svelte code

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

<NotificationBanner {...{
  text: "This publication was withdrawn on 7 March 2014."
}} />

Paragraph as html heading

Svelte code

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

<NotificationBanner {...{
  html: "<p class=\"govuk-notification-banner__heading\">You have 9 days to send a response.</p>"
}} />

With text as html

Svelte code

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

<NotificationBanner {...{
  html: "<h3 class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014</h3><p class=\"govuk-body\">Archived and replaced by the <a href=\"#\" class=\"govuk-notification-banner__link\">new planning guidance</a> launched 6 March 2014 on an external website</p>\n"
}} />

With type as success

Svelte code

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

<NotificationBanner {...{
  type: "success",
  text: "Email sent to example@email.com"
}} />

Success with custom html

Svelte code

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

<NotificationBanner {...{
  type: "success",
  html: "<h3 class=\"govuk-notification-banner__heading\">4 files uploaded</h3><ul class=\"govuk-!-margin-0 govuk-list\"><li><a href=\"link-1\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li><li><a href=\"link-2\" class=\"govuk-notification-banner__link\">government-strategy-v1.pdf</a></li></ul>\n"
}} />

With a list

Svelte code

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

<NotificationBanner {...{
  html: "<h3 class=\"govuk-notification-banner__heading\">4 files uploaded</h3>\n<ul class=\"govuk-list govuk-list--bullet govuk-!-margin-bottom-0\">\n    <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li>\n    <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v2.pdf</a></li>\n    <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v3-FINAL.pdf</a></li>\n    <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v4-FINAL-v2.pdf</a></li>\n</ul>\n"
}} />

With long heading

Svelte code

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

<NotificationBanner {...{
  text: "This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters."
}} />

With lots of content

Svelte code

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

<NotificationBanner {...{
  html: "<h3 class=\"govuk-notification-banner__heading\">\n  Check if you need to apply the reverse charge to this application\n</h3> <p class=\"govuk-body\">You will have to apply the <a href=\"#\" class=\"govuk-notification-banner__link\">reverse charge</a> if the applicant supplies any of these services:</p> <ul class=\"govuk-list govuk-list--bullet govuk-list--spaced\">\n  <li>\n    constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services\n  </li>\n  <li>\n    constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours\n  </li>\n</ul>\n"
}} />

AutoFocus disabled, with type as success

Svelte code

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

<NotificationBanner {...{
  type: "success",
  disableAutoFocus: true,
  text: "Email sent to example@email.com"
}} />

AutoFocus explicitly enabled, with type as success

Svelte code

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

<NotificationBanner {...{
  type: "success",
  disableAutoFocus: false,
  text: "Email sent to example@email.com"
}} />

Role=alert overridden to role=region, with type as success

Svelte code

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

<NotificationBanner {...{
  type: "success",
  role: "region",
  text: "Email sent to example@email.com"
}} />

Custom tabindex

Svelte code

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

<NotificationBanner {...{
  type: "success",
  text: "Email sent to example@email.com",
  attributes: {
    tabindex: 2
  }
}} />