Skip to main content

Ribbon

Last updated:
10/4/2023

Ribbons are a form of messaging that offer more information about the page content. They give the user more information about an element or elements on the page. Ribbons can also provide more actions that the user can perform on the page.

View in Storybook
Default ribbon

Modifiers

Center aligned

Text content is center aligned within the ribbon.

Center aligned ribbon

With shadow

A dropshadow is added to the ribbon. This modifier is only allowed for the informational ribbon style.

Ribbon with shadow

Styles

Default

The ribbon content will stretch with the page width.

Default ribbon

Constrained

The ribbon content will be constrained to a maximum width of 1320px.

Constrained ribbon

Informational

This style is used to show informational content. The text content can contain inline links.

Informational ribbon

Usage

Ribbons can’t be dismissed. Don’t use them in place of alerts or notifications.

Do:

  • Add more than one ribbon style per page
  • Add one inline link per ribbon, if necessary

Don't:

  • Add more ribbons than necessary
  • Add more than one inline link

Content guidelines

Ribbon content refers to the entire page.

Do:

  • Write in sentence case
  • Keep the text content short and to the point

Don't:

  • Add headings
  • Add more than a few lines of text content

Accessibility

This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that this component is fully accessible.