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.

Typography

This page describes the typography basics of the design system.
If you want to know how to adjust font-families, font-sizes, etc. in your code,
please visit our text utilities docs.

The main font family is "Swiss Post Sans".
It is available in three different font weights: black, bold and regular.

Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Swiss Post Sans
Weight: black
Style: normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Swiss Post Sans
Weight: bold
Style: normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Swiss Post Sans
Weight: regular
Style: normal

If you cannot use the design system but need the fonts, you can integrate them into your project as follows:

@font-face {
  font-family: 'Swiss Post Sans';
  font-weight: 900;
  font-display: swap;
  src: url('https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Black.woff2') format('woff2');
}

@font-face {
  font-family: 'Swiss Post Sans';
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Swiss Post Sans';
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Regular.woff2') format('woff2');
}

The CSS file including these @font-face definitions is available on our CDN under the following URL:

https://fonts.post.ch/swiss-post-sans/v1/swiss-post-sans.css

Font Sizes & Line Heights

The default font size is 16px. This corresponds to the CSS value of 1rem. Users are able to change the default font size in their browser. By using rem, the font-sizes scale nicely with the user defined value.

The line height depends on the font size and is specified with a multiplying factor. This multiplication factor decreases as the font size increases.

Font sizes variants are available in the text utilities.

The following sections show what specific elements look like.

TagVisual
<h1></h1>

h1 Heading

<h2></h2>

h2 Heading

<h3></h3>

h3 Heading

<h4></h4>

h4 Heading

<h5></h5>

h5 Heading

<h6></h6>

h6 Heading

Sometimes the document heading structure requires you
to use a heading tag that should look like another in order to maintain a consistency.
In those cases you can use the heading helper classes .h1 through .h6.
For more details, check out heading docs.

TagVisual
<p></p>

This is a sample paragraph showing how text will appear in your application. It demonstrates the font style, size, and spacing that will be used throughout your content.

Another paragraph follows to illustrate how multiple paragraphs will look. Notice the spacing between paragraphs and how the text flows naturally from one line to the next.

<p class="lead"></p>

This is a lead paragraph that stands out from regular text, typically used for introductory content.

TagVisual
<a></a>

Example Link

<p>
  <a></a>
</p>

This paragraph contains an inline clickable link that demonstrates how hyperlinks will appear within body text.

TagVisual
<small></small>

This text contains small inline text for fine print or disclaimers.

<strong></strong>

This text shows strong emphasis for important words or phrases.

<em></em>

This text shows emphasis through italics for subtle highlighting.

<sub></sub>

This text contains subscript text for chemical formulas or footnotes.

<sup></sup>

This text contains superscript text for exponents or references.

<mark></mark>

This text highlights important information for visual scanning.

<abbr></abbr>

This text contains an abbr element for shortened forms.

<code></code>

This text shows inline code examples for technical documentation.

<kbd></kbd>

Press Ctrl + C to copy text to clipboard.

<del></del>

This shows deleted text for tracking changes or corrections.

TagVisual

Unordered Lists

<ul>
  <li></li>
</ul>
  • First item in an unordered list
  • Second item with standard bullet points
  • Third item with nested list
    • First nested item
    • Second nested item
    • Third nested item
  • Final item in the main list

Ordered Lists

<ol>
  <li></li>
</ol>
  1. First step in a numbered list
  2. Second step with sequential numbering
  3. Third step with nested instructions
    1. First sub-step
    2. Second sub-step
    3. Third sub-step
  4. Final step in the main sequence

Description Lists (inline)

<dl>
  <dt></dt>
  <dd></dd>
</dl>
Term 1
Definition or description of the first term
Term 2
Explanation of the second term in the list
Term 3
Detailed description for the third entry

Description Lists (grid)

<dl class="row">
  <dt class="col-3"></dt>
  <dd class="col-9"></dd>
</dl>
Name
John Smith
Email
john@example.com
Role
Frontend Developer

For more details on how to change the look of lists,
visit our list utilities docs.