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.

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.

There are basically two font families available.
One is the main font family "Swiss Post Sans" and the other is a monospace font family.

Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Swiss Post Sans
Weight: bold
Style: normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Swiss Post Sans
Weight: regular
Style: normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Swiss Post Sans
Weight: light
Style: normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Monospace
Weight: bold
Style: normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Monospace
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-display: swap;
  font-family: 'Swiss Post Sans';
  font-weight: 700;
  src: url('https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Bold.woff2') format('woff2'),
    url('https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Bold.woff') format('woff');
}

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

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

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.

NameClassScss variableFont SizeLine Height
font-size-12font-size-12$font-size-1212px
0.75rem		1.5
1.125rem
font-size-14font-size-14$font-size-1414px
0.875rem		1.5
1.3125rem
font-size-16font-size-16$font-size-1616px
1rem		1.5
1.5rem
font-size-18font-size-18$font-size-1818px
1.125rem		1.5
1.6875rem
font-size-20font-size-20$font-size-2020px
1.25rem		1.5
1.875rem
font-size-24font-size-24$font-size-2424px
1.5rem		1.2
1.8rem
font-size-28font-size-28$font-size-2828px
1.75rem		1.2
2.1rem
font-size-32font-size-32$font-size-3232px
2rem		1.2
2.4rem
font-size-40font-size-40$font-size-4040px
2.5rem		1.2
3rem
font-size-48font-size-48$font-size-4848px
3rem		1.2
3.6rem
font-size-56font-size-56$font-size-5656px
3.5rem		1.2
4.2rem

Deprecated font-size definitions

The size and number of font-curves will change in the future because the naming and values used here are being deprecated in favor of a pixel based naming.

For legible font sizes on all screen sizes, you can make use of so called font-curves, responsive font size definitions.

Namexssmrgmdlgxlxxl
tiny13px
0.8125rem		13px
0.8125rem		15px
0.9375rem		15px
0.9375rem		16px
1rem		16px
1rem		17px
1.0625rem
small15px
0.9375rem		15px
0.9375rem		16px
1rem		16px
1rem		17px
1.0625rem		17px
1.0625rem		17px
1.0625rem
regular17px
1.0625rem		17px
1.0625rem		17px
1.0625rem		17px
1.0625rem		20px
1.25rem		20px
1.25rem		20px
1.25rem
bigger-regular17px
1.0625rem		17px
1.0625rem		20px
1.25rem		20px
1.25rem		24px
1.5rem		24px
1.5rem		24px
1.5rem
medium20px
1.25rem		20px
1.25rem		20px
1.25rem		20px
1.25rem		24px
1.5rem		24px
1.5rem		28px
1.75rem
large24px
1.5rem		24px
1.5rem		28px
1.75rem		28px
1.75rem		32px
2rem		32px
2rem		40px
2.5rem
big28px
1.75rem		28px
1.75rem		32px
2rem		32px
2rem		40px
2.5rem		40px
2.5rem		48px
3rem

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>

At vero eos et justo accusam et duo dolores et ea rebum. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Nullam quis risus eget urna mollis ornare veleu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

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

Lead sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

TagVisual
<a></a>

Link

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

At vero eos et justo accusam et duo dolores et ea rebum. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

TagVisual
<small></small>

At vero eos et accusam et justo duo dolores et ea rebum.

<strong></strong>

At vero eos et accusam et justo duo dolores et ea rebum.

<em></em>

At vero eos et accusam et justo duo dolores et ea rebum.

<sub></sub>

At vero eos et accusam et justo duo dolores et ea rebum.

<sup></sup>

At vero eos et accusam et justo duo dolores et ea rebum.

<mark></mark>

At vero eos et accusam et justo duo dolores et ea rebum.

<abbr></abbr>

At vero eos et accusam et justo duo dolores et ea rebum.

<code></code>

At vero eos et accusam et justo duo dolores et ea rebum.

<kbd></kbd>

At vero eos et accusam et justo duo dolores et ea rebum.

<del></del>

At vero eos et accusam et justo duo dolores et ea rebum.

TagVisual

Unordered Lists

<ul>
  <li></li>
</ul>
  • Nullam quis risus eget urna mollis.
  • At vero eos et justo accusam et duo dolores et ea rebum.
  • Invidunt ut labore et dolore magna aliquyam erat.
    • Nullam quis risus eget urna mollis.
    • At vero eos et justo accusam et duo dolores et ea rebum.
    • Invidunt ut labore et dolore magna aliquyam erat.
  • At vero eos et justo accusam et duo dolores et ea rebum.

Ordered Lists

<ol>
  <li></li>
</ol>
  1. Nullam quis risus eget urna mollis.
  2. At vero eos et justo accusam et duo dolores et ea rebum.
  3. Invidunt ut labore et dolore magna aliquyam erat.
    1. Nullam quis risus eget urna mollis.
    2. At vero eos et justo accusam et duo dolores et ea rebum.
    3. Invidunt ut labore et dolore magna aliquyam erat.
  4. At vero eos et justo accusam et duo dolores et ea rebum.

Description Lists (inline)

<dl>
  <dt></dt>
  <dd></dd>
</dl>
Title
Nullam quis risus eget urna mollis.
Second Title
At vero eos et justo accusam et duo dolores et ea rebum.
Third Title
Invidunt ut labore et dolore magna aliquyam erat.

Description Lists (grid)

<dl class="row">
  <dt class="col-3"></dt>
  <dd class="col-9"></dd>
</dl>
Title
Nullam quis risus eget urna mollis.
Second Title
At vero eos et justo accusam et duo dolores et ea rebum.
Third Title
Invidunt ut labore et dolore magna aliquyam erat.

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