Implement more card examples

[larsrickert]

Why?

We already implemented a few card examples for our Storybook docs.

We got the feature request (#2678) to build more examples and since we already have more examples created in Figma, we want to implement the other examples so our users can get inspiration from them.

Design

Figma

Acceptance criteria

The following card examples are implemented:

• Background image
• Event
• Checkbox
• Buttons
• Colored background
• Radio button
• (Graph)
• Like dislike
• Card with bottom bar, see playground example

Reference implementations

• existing card examples

Definition of Done

• The following component requirements are implemented:

  • density

• Should be covered by tests:

  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)

• Make sure, that

  • follow-up tickets were created if necessary
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Storybook code snippet of new/changed examples are checked that they are generated correctly
  • Namings are aligned with Figma

Approval

Storybook

• Checked and approved by
  • designer
  • dev