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.

Lists

Use lists to group a collection of related items.

There are three types of HTML lists: unordered lists, ordered lists, and description lists. Utility classes allow you to style each of these lists in different ways.

An unordered list groups related items in no specific order or sequence. It is created using a <ul> tag and each list item is preceded by a bullet (small circle).

  • This is an unordered list.
  • It appears in its default style.
  • Therefore it is rendered with a bullet point in front of each list item.
  • Nested list:
    • This is a nested list
    • It is further indented, depending on the depth of nesting.
  • This item belongs to the parent list.
<ul class="list-bullet">
  <li>This is an unordered list.</li>
  <li>It appears in its default style.</li>
  <li>Therefore it is rendered with a bullet point in front of each list item.</li>
  <li>
    Nested list:
    <ul class="list-bullet">
      <li>This is a nested list</li>
      <li>It is further indented, depending on the depth of nesting.</li>
    </ul>
  </li>
  <li>This item belongs to the parent list.</li>
</ul>
@use '@swisspost/design-system-styles/core' as post;

.my-component {
  ul {
    @include post.list-bullet();
  }
}

Remove a list’s bullets.

  • This is an inline list item.
  • And another one.
  • And one more.
<ul class="list-inline">
  <li>This is an inline list item.</li>
  <li>And another one.</li>
  <li>And one more.</li>
</ul>
@use '@swisspost/design-system-styles/core' as post;

.my-component {
  ul {
    @include post.list-inline();
  }
}

Remove all the styles on a list and make it appear as if it is made out of <div> elements.

  • This is an unstyled list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • Nested list:
    • They are unaffected by the style of its parent.
    • So they will still show a bullet.
    • And have an appropriate left indent.
  • This item belongs to the parent list.
<ul class="list-unstyled">
  <li>This is an unstyled list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>
    Nested list:
    <ul class="list-bullet">
      <li>They are unaffected by the style of its parent.</li>
      <li>So they will still show a bullet.</li>
      <li>And have an appropriate left indent.</li>
    </ul>
  </li>
  <li>This item belongs to the parent list.</li>
</ul>
@use '@swisspost/design-system-styles/core' as post;

.my-component {
  ul {
    @include post.list-unstyled() {
      // custom styles for the ul element
    }

    > li {
      // custom styles for child elements
    }
  }
}

An ordered list groups related items in a specific order. It is created using a <ol> tag and list items are preceded by ascending numbers by default.

All of the above utility classes also apply to ordered lists.
  1. This is an ordered list.
  2. It appears in its default style.
  3. Therefore it should be rendered with sequential numbers at the beginning of each list item.
  4. Nested list:
    1. This is a nested list
    2. It is further indented, depending on the depth of nesting.
    3. Nested lists numbers are independent form the numbers of their parents.
  5. This item belongs to the parent list.
<ol class="list-number">
  <li>This is an ordered list.</li>
  <li>It appears in its default style.</li>
  <li>
    Therefore it should be rendered with sequential numbers at the beginning of each list item.
  </li>
  <li>
    Nested list:
    <ol>
      <li>This is a nested list</li>
      <li>It is further indented, depending on the depth of nesting.</li>
      <li>Nested lists numbers are independent form the numbers of their parents.</li>
    </ol>
  </li>
  <li>This item belongs to the parent list.</li>
</ol>
@use '@swisspost/design-system-styles/core' as post;

.my-component {
  ul {
    @include post.list-number();
  }
}

A description list is a list of terms, with a description of each term. It is created using a <dl> tag, terms are defined using <dt> tags, and descriptions are defined using <dd> tags.

This is a description list.
It appears in its default style.
Group title
A description list is perfect for defining terms.
Term
Definition for the term.
<dl>
  <dt>This is a description list.</dt>
  <dd>It appears in its default style.</dd>
  <dt>Group title</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Term</dt>
  <dd>Definition for the term.</dd>
</dl>

Align terms and descriptions horizontally by using our grid system’s predefined classes. For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.

Term
Definition for the term.
Another term

This definition is long.

You can use extra markup whenever you need.

Long term that overflows its parent column and is therefore truncated
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list. 
<dl class="row">
  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">Definition for the term.</dd>
  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">
    <p>This definition is long.</p>
    <p>You can use extra markup whenever you need.</p>
  </dd>
  <dt class="col-sm-3 text-truncate">
    Long term that overflows its parent column and is therefore truncated
  </dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">
        I heard you like definition lists. Let me put a definition list inside your definition list.
      </dd>
    </dl>
  </dd>
</dl>

A non-interactive checklist is a list with a check icon prefix, not only for better visual identification of the list items but also to indicate a 'completed' status for each item.

  • This is a check list item.
  • And another one.
  • And one more.
<ul class="list-check">
  <li>This is a check list item.</li>
  <li>And another one.</li>
  <li>And one more.</li>
</ul>