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.

Card

Figma Design

Cards provide a flexible and extensible content container with multiple variants and options.

Built with flexbox, they offer easy alignment and mix well with other components.

They have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customizable using the grid for example. For more details on that, read our grid docs.

Card Title

This is the card content that can contain various types of information.

<post-linkarea>
  <div class="card">
    <img src="https://picsum.photos/id/20/300/200" alt="" class="card-img-top" />

    <div class="card-body">
      <h5 class="card-title">Card Title</h5>

      <p class="card-text">
        This is the card content that can contain various types of information.
      </p>

      <button class="btn btn-primary">
        <span>Button Text</span>
      </button>
    </div>
  </div>
</post-linkarea>
NameDescriptionDefaultControl
Card Image
Show Image
When set to true, an image is shown in the card.
boolean
-
Image Position
Defines the position of the image within the card.
string
-
Card Header
Show Header
When set to true, a header is shown in the card.
boolean
-
Card Body
Show Title
When set to true, a title is shown in the card body.
boolean
-
Show Subtitle
When set to true, a subtitle is shown in the card body.
boolean
-
Content
The text contained in the card body.
string
-
Action
Defines the call-to-action to show in the card body.
string
-
Card Footer
Show Footer
When set to true, a footer is shown in the card.
boolean
-

Make sure the @swisspost/design-system-styles package is already present in your project or follow the installation guidelines.

To import all Design System styles:

@use '@swisspost/design-system-styles/post-compact.scss';

To import only the styles required for this component:

@use '@swisspost/design-system-styles/basics.scss';
@use '@swisspost/design-system-styles/components/card.scss';

Card elements can contain many things, they can be interactive or not. Interactive cards will have a shadow and an hover effect. To make your card interactive, simply add the post-linkarea component around it. To read more about it, read our post-linkarea docs.

Non-interactive card

Interactive card

 
<div class="card p-16">
  <p>Non-interactive card</p>
</div>

<post-linkarea>
  <div class="card p-16">
    <p><a href="http://google.com">Interactive card</a></p>
  </div>
</post-linkarea>

Cards should never be the same color as its section's background. Therefore, depending on the palette, the card's background color will adapt.

Custom Content

Cards support a wide variety of content, including images, text, links, and more. This applies to the body of the card as well as its header and footer.

User Details

Add Address

Create lists of content in a card by simply using a flush list group in place of the card body.

  • First Item
  • Second Item
  • Another Item
Card Title

This is the card content that can contain various types of information.