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.

Text

Use text utilities to control font family, size, alignment, wrapping, and more.

Use the class .font-sans-serif to set the text as the default font-family.

This is sans serif text.

<p class="font-sans-serif">This is sans serif text.</p>
@use '@swisspost/design-system-styles/core' as post;

.my-element {
  font-family: post.$font-family-sans-serif;
}

The font size classes available are .fs-* from 1 to 11, .fs-1 being the biggest and .fs-11 the smallest one. The font sizes are responsive and will adapt with the viewport.

The font sizes .fs-1 to .fs-5 are equivalent to ones defined for the headings elements (h1 to h5), while .fs-6 is equivalent to the default body text.

This is a text.

This is a text.

This is a text.

This is a text.

This is a text.

This is a text.

This is a text.

This is a text.

This is a text.

This is a text.

This is a text.

<p class="fs-1">This is a text.</p>
<p class="fs-2">This is a text.</p>
<p class="fs-3">This is a text.</p>
<p class="fs-4">This is a text.</p>
<p class="fs-5">This is a text.</p>
<p class="fs-6">This is a text.</p>
<p class="fs-7">This is a text.</p>
<p class="fs-8">This is a text.</p>
<p class="fs-9">This is a text.</p>
<p class="fs-10">This is a text.</p>
<p class="fs-11">This is a text.</p>

The font weight classes available are .fw-normal, .fw-bold and .fw-black.

This is a normal text.

This is a bold text.

This is a black text.

<p class="fw-normal">This is a normal text.</p>
<p class="fw-bold">This is a bold text.</p>
<p class="fw-black">This is a black text.</p>

The font style classes available are .fst-normal and .fst-italic.

This is a normal text.

This is an italic text.

<p class="fst-normal">This is a normal text.</p>
<p class="fst-italic">This is an italic text.</p>

The line height classes available are .lh-1, .lh-sm and .lh-lg.

For good accessibility, the line height is set to 1.5 for body text and 1.2 for headings by default.

This text has a line height equal to the font size.

This text has a small line height.

This text has a large line height.

<p class="my-text lh-1">This text has a line height equal to the font size.</p>
<p class="my-text lh-sm">This text has a small line height.</p>
<p class="my-text lh-lg">This text has a large line height.</p>

Text

Define how text-blocks are displayed.

Reset a text color with .text-reset, so that an element inherits the color from its parent.

This is a colored text with a link of the same color. 

<p class="my-colored-text">
  This is a colored text with a
  <a href="#" class="text-reset">link</a>
  of the same color.
</p>

Easily realign text to components with text alignment classes.

Start aligned text

Center aligned text

End aligned text

<p class="text-start">Start aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">End aligned text</p>

For start, end, and center alignment, responsive classes are available that use the same viewport breakpoints as the grid system. The responsive alignment classes have the following format: text-{breakpoint}-{alighment}.

For more detailed informations about breakpoints read our layout docs.

Wrap text or prevent it from wrapping with the .text-wrap and .text-nowrap utility classes.

This text should NOT wrap, demonstrating how text behaves without wrapping enabled.

This text should wrap, showing how text naturally breaks into multiple lines when wrapping is enabled. 

<div class="my-container w-half">
  <p class="text-nowrap">
    This text should NOT wrap, demonstrating how text behaves without wrapping enabled.
  </p>
</div>
<div class="my-container w-half text-nowrap">
  <p class="text-wrap">
    This text should wrap, showing how text naturally breaks into multiple lines when wrapping is
    enabled.
  </p>
</div>

Prevent long strings of text from breaking your component's layout by using the utility class .text-break.

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

<div class="my-container w-half">
  <p class="text-break">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
</div>

Transform text with the following text capitalization classes: .text-lowercase, .text-uppercase and .text-capitalize.

This is a Lowercased text.

This is an Uppercased text.

This is a CapiTaliZed text.

<p class="text-lowercase">This is a Lowercased text.</p>
<p class="text-uppercase">This is an Uppercased text.</p>
<p class="text-capitalize">This is a CapiTaliZed text.</p>

Decorate text with the following text decoration classes: text-decoration-underline, .text-decoration-line-through and .text-decoration-none.

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed. 
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed.</a>