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.

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 their parent element. This is easily customizable using the grid for example. For more details on that, read our grid docs.

This is my card's title

This is my card's content.

<post-linkarea>
  <div class="card">
    <div class="card-body">
      <h5>This is my card's title</h5>
      <p>This is my card's content.</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
-
Card Content
Content
The content within the card.
string
-
Action
Defines the call-to-action to show in the card.
string
-

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">
  <div class="card-body">
    <p>Non-interactive card</p>
  </div>
</div>

<post-linkarea>
  <div class="card">
    <div class="card-body">
      <p><a href="http://google.com">Interactive card</a></p>
    </div>
  </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

A card is simply a box which can contain a wide variety of content, including images, text, links, and more.

User Details

Add Address

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

  • First Item
  • Second Item
  • Another Item