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.

Card

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 read our grid docs.

Titulum

Contentus momentus vero siteos et accusam iretea et justo.

<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">Titulum</h5>

    <p class="card-text">Contentus momentus vero siteos et accusam iretea et justo.</p>

    <button class="btn btn-primary btn-animated">
      <span>Butonon teksto</span>
    </button>
  </div>
</div>
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/index.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';

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.

Detaloj de la Uzanto

Aldonu adreson

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

  • Ero
  • Dua ero
  • Alio ero

Use card groups to render cards as a single, attached element with equal width and height columns.

Titulum

Contentus momentus vero siteos et accusam iretea et justo.

Titulum

Contentus momentus vero siteos et accusam iretea et justo.

Titulum

Contentus momentus vero siteos et accusam iretea et justo.

Never use text with a background image because you can't ensure it is readable by everyone for all languages and browser sizes.

Titulum

Contentus momentus vero siteos et accusam iretea et justo.