No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Banner

Figma Design

A banner shows general notifications for a product or system, not a specific task and should therefore not require the user to take immediate action. Banners can persist across multiple sessions.

Banners are intended to attract the user's attention without interrupting their ongoing task.

There are various methods to integrate this component into your project.

We advise opting for the "Standard HTML" approach for banners that remain static on the page and using the "Web Component" method for dismissible banners.

 Standard HTML
<div role="alert" class="banner banner-neutral banner-action">
  <div class="banner-content">
    <p>This is the content of the banner. It helps to draw attention to critical messages.</p>
  </div>

  <div class="banner-buttons">
    <button class="btn btn-primary">
      <span>Accept</span>
    </button>
    <button class="btn btn-secondary">
      <span>Cancel</span>
    </button>
  </div>
</div>
NameDescriptionDefaultControl
Content
Action Buttons
If true, the banner contains action buttons on its right side.
boolean
-
No Icon
If true, no icon is displayed on the left side of the banner.
boolean
-
Icon
The icon to display in the banner. By default, the icon depends on the banner type.
object
-
Type
The type of the banner.
string
-
Behaviour
Is a dialog
If true, banner will be set as a dialog component
boolean
-

Make sure the @swisspost/design-system-styles package is already present in your project or follow the installation guidelines.

To import all Design System styles:

@use '@swisspost/design-system-styles/post-compact.scss';

To import only the styles required for this component:

@use '@swisspost/design-system-styles/basics.scss';
@use '@swisspost/design-system-styles/components/banner.scss';

Banners can be used as a dialog that opens on top of the current page.

Banners can contain various HTML elements like headings, paragraphs, lists and dividers.

Banners come with a preassigned icon based on their type. You have the option to customize this icon by using a post-icon element inside the banner. For more information, read the getting started with icons guide.

If you prefer not to display any icon, you can add the .no-icon class to the banner.

To include action buttons within a banner, apply the .banner-action class to the banner element, enclose the banner's content within a .banner-content container, and place the action buttons within a .banner-buttons wrapper.

Web Component
<post-banner
  ><p>
    This is the content of the banner. It helps to draw attention to critical messages.
  </p></post-banner
>
NameDescriptionDefaultControl
content
innerHTML
Defines the HTML markup contained in the banner.
string
-
props
dismissible
If true, a close button (×) is displayed and the banner can be dismissed by the user.
boolean
false
icon

The icon to display in the banner. By default, the icon depends on the banner type.

If none, no icon is displayed.

string
type
The type of the banner.
"danger""info""neutral""success""warning"
'neutral'
events
postDismissed

An event emitted when the banner element is dismissed, after the transition. It has no payload and only relevant for dismissible banners.

void
--
methods
dismiss
Triggers banner dismissal programmatically (same as clicking on the close button (×)).
dismiss() => Promise<void>
--
slots
actions
Slot for placing custom actions (buttons, links, etc.) within the banner.
other
--
default
Slot for placing the main content/message of the banner.
other
--
heading
Slot for placing custom content within the banner's heading.
other
--

The <post-banner> element is part of the @swisspost/design-system-components package. For more information, read the getting started with components guide.

Banners can contain various HTML elements like paragraphs, lists, icons and dividers.

By default all children of the <post-banner> are placed in the body. Use the heading slot to place a child in the heading, and the actions slot for action buttons. Learn more about slots in the mdn web docs.

Banners come with a preassigned icon based on their type. You have the option to customize this icon by assigning the desired icon's name to the icon property of the banner. Find the icon you need with the icon search page.

If you prefer not to display any icon, you can set the icon property to none.

The dismissible property can be set to enable users to dismiss the banner. When present, it specifies that the banner should contain a dismiss button, and you must provide a label for this button using the dismiss-label property. Although the label remains hidden from view, it is essential for ensuring accessibility for users of assistive technologies.

Alternatively, you can use any button, including action buttons within the banner, as a trigger for dismissing the banner using the .dismiss() method. This method operates asynchronously and returns a promise that resolves once the fade-out animation has finished.

const banner = document.getElementById('bannerId') as HTMLPostBannerElement;

banner.dismiss().then(() => {});