Banner

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


React Component

Default (with link)

I have spoken.

Link here

Secondary (with link)

Now this is podracing.

Link here

Warning (with button)

Execute Order 66.

Link here

Danger (dismiss disabled)

It's over, Anakin. I have the high ground.

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.