Banner

A banner that displays at the top of the page, used for systemwide notifications and events.

React Component

Default (with link)

Secondary (with link)

Warning (with button)

Danger (dismiss disabled)

Default fixed (Ladera top context)

Select "Toggle banner" to trigger banner at top of page

Sage Component

SageBanner

<h3 class="t-sage-heading-6">Default (with link)</h3>
<%= sage_component SageBanner, {
  banner_context: "sage-demo",
  active: true,
  dismissable: true,
  text: "I have spoken.",
  link: {
    name: "Link here",
    attributes: {
      href: "#",
      referer: "no-referer"
    }
  }
} %>

<h3 class="t-sage-heading-6">Secondary (with link)</h3>
<%= sage_component SageBanner, {
  banner_context: "sage-demo",
  active: true,
  dismissable: true,
  type: "secondary",
  text: "Now this is podracing.",
  link: {
    name: "Link here",
    attributes: {
      href: "#",
      referer: "no-referer"
    }
  }
} %>

<h3 class="t-sage-heading-6">Warning (with button)</h3>
<%= sage_component SageBanner, {
  banner_context: "sage-demo",
  active: true,
  dismissable: true,
  type: "warning",
  text: "Execute Order 66.",
  link: {
    name: "Link here",
    attributes: {
      href: "#",
      referer: "no-referer"
    }
  }
} %>

<h3 class="t-sage-heading-6">Danger (dismiss disabled)</h3>
<%= sage_component SageBanner, {
  banner_context: "sage-demo",
  active: true,
  dismissable: false,
  type: "danger",
  text: "It's over, Anakin. I have the high ground.",
} %>

<h3 class="t-sage-heading-6">Default fixed (Ladera top context)</h3>
<p>Select "Toggle banner" to trigger banner at top of page</p>
<%= sage_component SageButton, {
  style: "primary",
  value: "Toggle banner",
  attributes: {
    "data-js-toggle-banner": "banner-1"
  }
} %>

<%= sage_component SageBanner, {
  text: "Another happy landing.",
  link: {
    name: "Dismiss",
    attributes: {
      "data-js-toggle-banner": "SELF",
      href: "#"
    },
  },
  id: "banner-1",
} %>

Property	Description	Type	Default
`active`	This class enables the banner, and through the associated script adjusts the page body to compensate.	String	`nil`
`banner_context`	Modifier that updated styling of the component	`"ladera-top"`, `"sage-demo"`	`nil`
`dismissable`	Adds close icon and functionality to allow alert to be closed	Boolean	`nil`
`id`	Unique identifier for this component.	String	`nil`
`link`	Creates a link within the component.	String	`nil`
`text` required	Sets the text to be displayed.	String	`nil`
`type`	Modifier that sets the color scheme and icon type for the component.	`"default"`, `"secondary"`, `"warning"`, `"danger"`	`default`

Don't

Do not enable multiple banners for view at once. Only a single banner can be shown.