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.

Breakpoints

Breakpoints are widths that determine how the responsive layout behaves across device or viewport sizes.

The Swiss Post Design System includes 5 breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.

xs
<600px		sm
≥600px		md
≥780px		lg
≥1024px		xl
≥1280px
NameExtra smallSmallMediumLargeExtra large
Code namexssmmdlgxl
Class infixnone-sm--md--lg--xl-

When using our source Sass files, you have the option of using Sass variables to change the breakpoints (not recommended).

$grid-breakpoints: (
  "xs": "0",
  "sm": "600px",
  "md": "780px",
  "lg": "1024px",
  "xl": "1280px"
);

There are several mixins available to use in your own Sass to help with building responsive layouts.

We primarily use the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

@use '@swisspost/design-system-styles/core' as post;

// No media query necessary for xs breakpoint as it's effectively @media (min-width: 0) { ... }
.custom-class {
  display: none;
}

@include post.min(lg) {
  .custom-class {
    display: block;
  }
}

We occasionally use media queries that go in the other direction.

@use '@swisspost/design-system-styles/core' as post;

// No media query necessary for xs breakpoint as it's effectively @media (max-width: 0) { ... }
@include post.max(lg) {
  .custom-class {
    display: none;
  }
}

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

@use '@swisspost/design-system-styles/core' as post;

@include post.only(xs) {
  .custom-class {
    display: block;
  }
}

Similarly, media queries may span multiple breakpoint widths.

@use '@swisspost/design-system-styles/core' as post;

@include post.between(sm, lg) {
  .custom-class {
    display: block;
  }
}