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.

Post Logo

Figma Design

Display the Post logo as a clickable link or as a simple image.

Logo of the Post 
<post-logo>Logo of the Post</post-logo>
NameDescriptionDefaultControl
props
url
The URL to which the user is redirected upon clicking the logo.
URLstring
slots
default
Slot for placing hidden descriptive text. If url is set, this text will serve as the accessible name of the link; otherwise, it will be used as the title of the SVG.
other
--

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

By default, the logo will be 100% of the height of its parent. You can also set the height on the logo using one of the sizing utility classes.

Logo of the Post

You can use the logo as a link by setting its url property. Ensure that the descriptive text clearly indicates the destination the user will be redirected to after clicking the logo.

Logo of the Post, To the homepage

For client-side routing applications, a custom link component can be implemented; refer to the guidelines for details.