diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 4f337878cc..89f87cbe4c 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -115,6 +115,20 @@ export namespace Components {
          */
         "homeUrl": string;
     }
+    interface PostCard {
+        /**
+          * Image position
+         */
+        "imgPosition"?: 'top' | 'bottom';
+        /**
+          * Image source
+         */
+        "imgSrc"?: string;
+        /**
+          * Variant of the card
+         */
+        "variant"?: 'card' | 'card-product' | 'card-teaser';
+    }
     /**
      * @class PostCardControl - representing a stencil component
      */
@@ -164,6 +178,12 @@ export namespace Components {
          */
         "value": string;
     }
+    interface PostCardSection {
+        /**
+          * Palette to use on section
+         */
+        "palette"?: 'alternate' | 'default' | 'accent' | 'brand';
+    }
     interface PostClosebutton {
     }
     interface PostCollapsible {
@@ -612,6 +632,12 @@ declare global {
         prototype: HTMLPostBreadcrumbsElement;
         new (): HTMLPostBreadcrumbsElement;
     };
+    interface HTMLPostCardElement extends Components.PostCard, HTMLStencilElement {
+    }
+    var HTMLPostCardElement: {
+        prototype: HTMLPostCardElement;
+        new (): HTMLPostCardElement;
+    };
     interface HTMLPostCardControlElementEventMap {
         "postInput": { state: boolean; value: string };
         "postChange": { state: boolean; value: string };
@@ -633,6 +659,12 @@ declare global {
         prototype: HTMLPostCardControlElement;
         new (): HTMLPostCardControlElement;
     };
+    interface HTMLPostCardSectionElement extends Components.PostCardSection, HTMLStencilElement {
+    }
+    var HTMLPostCardSectionElement: {
+        prototype: HTMLPostCardSectionElement;
+        new (): HTMLPostCardSectionElement;
+    };
     interface HTMLPostClosebuttonElement extends Components.PostClosebutton, HTMLStencilElement {
     }
     var HTMLPostClosebuttonElement: {
@@ -902,7 +934,9 @@ declare global {
         "post-banner": HTMLPostBannerElement;
         "post-breadcrumb-item": HTMLPostBreadcrumbItemElement;
         "post-breadcrumbs": HTMLPostBreadcrumbsElement;
+        "post-card": HTMLPostCardElement;
         "post-card-control": HTMLPostCardControlElement;
+        "post-card-section": HTMLPostCardSectionElement;
         "post-closebutton": HTMLPostClosebuttonElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-collapsible-trigger": HTMLPostCollapsibleTriggerElement;
@@ -1017,6 +1051,20 @@ declare namespace LocalJSX {
          */
         "homeUrl"?: string;
     }
+    interface PostCard {
+        /**
+          * Image position
+         */
+        "imgPosition"?: 'top' | 'bottom';
+        /**
+          * Image source
+         */
+        "imgSrc"?: string;
+        /**
+          * Variant of the card
+         */
+        "variant"?: 'card' | 'card-product' | 'card-teaser';
+    }
     /**
      * @class PostCardControl - representing a stencil component
      */
@@ -1066,6 +1114,12 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface PostCardSection {
+        /**
+          * Palette to use on section
+         */
+        "palette"?: 'alternate' | 'default' | 'accent' | 'brand';
+    }
     interface PostClosebutton {
     }
     interface PostCollapsible {
@@ -1373,7 +1427,9 @@ declare namespace LocalJSX {
         "post-banner": PostBanner;
         "post-breadcrumb-item": PostBreadcrumbItem;
         "post-breadcrumbs": PostBreadcrumbs;
+        "post-card": PostCard;
         "post-card-control": PostCardControl;
+        "post-card-section": PostCardSection;
         "post-closebutton": PostClosebutton;
         "post-collapsible": PostCollapsible;
         "post-collapsible-trigger": PostCollapsibleTrigger;
@@ -1415,10 +1471,12 @@ declare module "@stencil/core" {
             "post-banner": LocalJSX.PostBanner & JSXBase.HTMLAttributes<HTMLPostBannerElement>;
             "post-breadcrumb-item": LocalJSX.PostBreadcrumbItem & JSXBase.HTMLAttributes<HTMLPostBreadcrumbItemElement>;
             "post-breadcrumbs": LocalJSX.PostBreadcrumbs & JSXBase.HTMLAttributes<HTMLPostBreadcrumbsElement>;
+            "post-card": LocalJSX.PostCard & JSXBase.HTMLAttributes<HTMLPostCardElement>;
             /**
              * @class PostCardControl - representing a stencil component
              */
             "post-card-control": LocalJSX.PostCardControl & JSXBase.HTMLAttributes<HTMLPostCardControlElement>;
+            "post-card-section": LocalJSX.PostCardSection & JSXBase.HTMLAttributes<HTMLPostCardSectionElement>;
             "post-closebutton": LocalJSX.PostClosebutton & JSXBase.HTMLAttributes<HTMLPostClosebuttonElement>;
             "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
             "post-collapsible-trigger": LocalJSX.PostCollapsibleTrigger & JSXBase.HTMLAttributes<HTMLPostCollapsibleTriggerElement>;
diff --git a/packages/components/src/components/post-card-section/post-card-section.scss b/packages/components/src/components/post-card-section/post-card-section.scss
new file mode 100644
index 0000000000..0e2948b08a
--- /dev/null
+++ b/packages/components/src/components/post-card-section/post-card-section.scss
@@ -0,0 +1,5 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
diff --git a/packages/components/src/components/post-card-section/post-card-section.tsx b/packages/components/src/components/post-card-section/post-card-section.tsx
new file mode 100644
index 0000000000..6a6b99413b
--- /dev/null
+++ b/packages/components/src/components/post-card-section/post-card-section.tsx
@@ -0,0 +1,45 @@
+import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import { version } from '@root/package.json';
+
+/**
+ * @slot default - Slot for the section
+ */
+@Component({
+  tag: 'post-card-section',
+  styleUrl: 'post-card-section.scss',
+  shadow: false,
+})
+export class PostCardSection {
+  @Element() host: HTMLPostCardSectionElement;
+
+  @State() hasOneInteractiveElement: boolean;
+
+  /**
+   * Palette to use on section
+   */
+  @Prop() palette?: 'alternate' | 'default' | 'accent' | 'brand' = 'default';
+
+  private checkIfInteractive() {
+    const interactiveElements: NodeListOf<HTMLAnchorElement> =
+      this.host.querySelectorAll('a, button');
+    this.hasOneInteractiveElement = interactiveElements.length === 1;
+    console.log(interactiveElements, interactiveElements.length, this.hasOneInteractiveElement);
+  }
+
+  componentWillRender() {
+    this.checkIfInteractive();
+  }
+
+  render() {
+    return (
+      <Host data-version={version} class={'card-body palette-' + this.palette}>
+        {this.hasOneInteractiveElement && (
+          <post-linkarea>
+            <slot></slot>
+          </post-linkarea>
+        )}
+        {!this.hasOneInteractiveElement && <slot></slot>}
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-card-section/readme.md b/packages/components/src/components/post-card-section/readme.md
new file mode 100644
index 0000000000..ce8dc66fed
--- /dev/null
+++ b/packages/components/src/components/post-card-section/readme.md
@@ -0,0 +1,35 @@
+# post-card
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property  | Attribute | Description               | Type                                              | Default     |
+| --------- | --------- | ------------------------- | ------------------------------------------------- | ----------- |
+| `palette` | `palette` | Palette to use on section | `"accent" \| "alternate" \| "brand" \| "default"` | `'default'` |
+
+
+## Slots
+
+| Slot        | Description          |
+| ----------- | -------------------- |
+| `"default"` | Slot for the section |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-linkarea](../post-linkarea)
+
+### Graph
+```mermaid
+graph TD;
+  post-card-section --> post-linkarea
+  style post-card-section fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-card/post-card.scss b/packages/components/src/components/post-card/post-card.scss
new file mode 100644
index 0000000000..0e2948b08a
--- /dev/null
+++ b/packages/components/src/components/post-card/post-card.scss
@@ -0,0 +1,5 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
diff --git a/packages/components/src/components/post-card/post-card.tsx b/packages/components/src/components/post-card/post-card.tsx
new file mode 100644
index 0000000000..f1c0122296
--- /dev/null
+++ b/packages/components/src/components/post-card/post-card.tsx
@@ -0,0 +1,117 @@
+import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
+import { version } from '@root/package.json';
+import { checkNonEmpty } from '@/utils';
+
+/**
+ * @slot default - Slot for the body of the card
+ * @slot header - Slot for the card header
+ * @slot footer - Slot for the card footer
+ */
+@Component({
+  tag: 'post-card',
+  styleUrl: 'post-card.scss',
+  shadow: false,
+})
+export class PostCard {
+  @Element() host: HTMLPostCardElement;
+
+  @State() hasHeader: boolean;
+  @State() hasFooter: boolean;
+  @State() hasOneInteractiveElement: boolean;
+
+  /**
+   * Image source
+   */
+  @Prop() imgSrc?: string;
+
+  /**
+   * Variant of the card
+   */
+  @Prop() variant?: 'card' | 'card-product' | 'card-teaser' = 'card';
+
+  /**
+   * Image position
+   */
+  @Prop() imgPosition?: 'top' | 'bottom' = 'top';
+
+  @Watch('imgSrc')
+  validateImage() {
+    if (this.variant === 'card-teaser') {
+      checkNonEmpty(this, 'imgSrc', 'A card teaser requires an image.');
+    }
+  }
+
+  /**
+   * Class to be added to the card
+   */
+  private variantClass = 'card';
+
+  private checkIfInteractive() {
+    const interactiveElements: NodeListOf<HTMLAnchorElement> =
+      this.host.querySelectorAll('a, button');
+    this.hasOneInteractiveElement = interactiveElements.length === 1;
+    console.log(interactiveElements, interactiveElements.length, this.hasOneInteractiveElement);
+  }
+
+  componentWillRender() {
+    this.hasHeader = this.host.querySelectorAll('[slot=header]').length > 0;
+    this.hasFooter = this.host.querySelectorAll('[slot=footer]').length > 0;
+
+    switch (this.variant) {
+      case 'card':
+        this.variantClass = 'card';
+        break;
+      case 'card-product':
+        this.variantClass = 'card product-card';
+        break;
+      case 'card-teaser':
+        this.variantClass = 'card teaser-card';
+        break;
+    }
+
+    if (this.variant === 'card-product') {
+      this.hasOneInteractiveElement = false;
+    } else {
+      this.checkIfInteractive();
+    }
+  }
+
+  private renderCardContent() {
+    return (
+      <div class={this.variantClass}>
+        {this.imgSrc && this.imgPosition === 'top' && (
+          <img class={'card-img-' + this.imgPosition} src={this.imgSrc} alt="" />
+        )}
+        {this.hasHeader && (
+          <div class="card-header">
+            <slot name="header" />
+          </div>
+        )}
+        {this.variant === 'card-product' && <slot />}
+        {this.variant !== 'card-product' && (
+          <div class="card-body">
+            <slot />
+          </div>
+        )}
+
+        {this.hasFooter && (
+          <div class="card-footer">
+            <slot name="footer" />
+          </div>
+        )}
+        {this.imgSrc && this.imgPosition === 'bottom' && (
+          <img class={'card-img-' + this.imgPosition} src={this.imgSrc} alt="" />
+        )}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Host data-version={version}>
+        {this.hasOneInteractiveElement && <post-linkarea>{this.renderCardContent()}</post-linkarea>}
+        {!this.hasOneInteractiveElement && this.renderCardContent()}
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-card/readme.md b/packages/components/src/components/post-card/readme.md
new file mode 100644
index 0000000000..dfe7b2d3f4
--- /dev/null
+++ b/packages/components/src/components/post-card/readme.md
@@ -0,0 +1,39 @@
+# post-card
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description         | Type                                        | Default     |
+| ------------- | -------------- | ------------------- | ------------------------------------------- | ----------- |
+| `imgPosition` | `img-position` | Image position      | `"bottom" \| "top"`                         | `'top'`     |
+| `imgSrc`      | `img-src`      | Image source        | `string`                                    | `undefined` |
+| `variant`     | `variant`      | Variant of the card | `"card" \| "card-product" \| "card-teaser"` | `'card'`    |
+
+
+## Slots
+
+| Slot        | Description                   |
+| ----------- | ----------------------------- |
+| `"default"` | Slot for the body of the card |
+| `"footer"`  | Slot for the card footer      |
+| `"header"`  | Slot for the card header      |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-linkarea](../post-linkarea)
+
+### Graph
+```mermaid
+graph TD;
+  post-card --> post-linkarea
+  style post-card fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-linkarea/readme.md b/packages/components/src/components/post-linkarea/readme.md
index 78ec368a82..5235c1400c 100644
--- a/packages/components/src/components/post-linkarea/readme.md
+++ b/packages/components/src/components/post-linkarea/readme.md
@@ -5,6 +5,21 @@
 <!-- Auto Generated Below -->
 
 
+## Dependencies
+
+### Used by
+
+ - [post-card](../post-card)
+ - [post-card-section](../post-card-section)
+
+### Graph
+```mermaid
+graph TD;
+  post-card --> post-linkarea
+  post-card-section --> post-linkarea
+  style post-linkarea fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 59d27159e6..952ceec13a 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -8,7 +8,9 @@ export { PostBackToTop } from './components/post-back-to-top/post-back-to-top';
 export { PostBanner } from './components/post-banner/post-banner';
 export { PostBreadcrumbs } from './components/post-breadcrumbs/post-breadcrumbs';
 export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item';
+export { PostCard } from './components/post-card/post-card';
 export { PostCardControl } from './components/post-card-control/post-card-control';
+export { PostCardSection } from './components/post-card-section/post-card-section';
 export { PostClosebutton } from './components/post-closebutton/post-closebutton';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger';
diff --git a/packages/documentation/src/stories/components/card/card-webcomponent.snapshot.stories.ts b/packages/documentation/src/stories/components/card/card-webcomponent.snapshot.stories.ts
new file mode 100644
index 0000000000..a143a86435
--- /dev/null
+++ b/packages/documentation/src/stories/components/card/card-webcomponent.snapshot.stories.ts
@@ -0,0 +1,199 @@
+import type { StoryObj } from '@storybook/web-components';
+import meta from './card.stories';
+import { html } from 'lit';
+import { bombArgs } from '@/utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const CardWebComponent: Story = {
+  render: () => {
+    // Define basic content template variants
+    const cardVariants = [
+      // Layout related combinations
+      ...bombArgs({
+        imgSrc: ['https://picsum.photos/id/20/300/200', null],
+        imgPosition: ['top', 'bottom'],
+        showHeader: [false, true],
+        showBody: [false, true],
+        showFooter: [false, true],
+        interactiveContent: ['button', 'links'],
+      }),
+    ]
+      // Has to show anything
+      .filter(args => args.showHeader || args.showBody || args.showFooter || args.showImage)
+      // No single footer
+      .filter(args => !(args.showFooter && !args.showBody && !args.showHeader))
+      // No single header
+      .filter(args => !(args.showHeader && !args.showBody && !args.showFooter))
+      // No header and footer without content in between
+      .filter(args => !(args.showHeader && args.showFooter && args.showBody === false))
+      // Ignore header position if showHeader is false
+      .filter(args => !(!args.imgSrc && args.imgPosition === 'bottom'))
+      // Ignore header position if only img is shown
+      .filter(
+        args =>
+          !(
+            args.showImage &&
+            !args.showBody &&
+            !args.showHeader &&
+            !args.showFooter &&
+            args.imagePosition === 'bottom'
+          ),
+      )
+      // Map default template variants
+      .map(args => {
+        const cardBody = html`
+          <h5 class="card-title">Title</h5>
+          <h6 class="card-subtitle mb-8 text-muted">Subtitle</h6>
+          <p class="card-text">This is my text</p>
+          ${args.interactiveContent === 'button'
+            ? html`<button class="btn btn-tertiary px-0">
+                Button label <post-icon name="arrowright"></post-icon>
+              </button>`
+            : ''}
+          ${args.interactiveContent === 'links'
+            ? html`<a class="card-link" href="#">Link one</a
+                ><a class="card-link" href="#">Link two</a>`
+            : ''}
+        `;
+        return html`
+          <div class="col-4 pb-16">
+            <post-card img-src="${args.imgSrc}" img-position="${args.imgPosition}">
+              ${args.showHeader ? html`<div slot="header">Card header</div>` : ''}
+              ${args.showBody ? cardBody : ''}
+              ${args.showFooter ? html`<div slot="footer">Card footer</div>` : ''}
+            </post-card>
+          </div>
+        `;
+      });
+
+    const cardProductVariants = [
+      // Layout related combinations
+      ...bombArgs({
+        interactiveContent: ['button', 'link'],
+        size: ['small', 'medium', 'large'],
+      }),
+    ]
+      // Map default template variants
+      .map(
+        args => html`
+          <div class="col-4 pb-16">
+            <post-card variant="card-product">
+              <post-card-section palette="default">
+                <div class="product-navigation">
+                  <div>
+                    <h3>Affordable</h3>
+                    <h4 class="mb-16">Sample Product</h4>
+                    <p class="lead">
+                      With SAMPLE PRODUCT, your letters arrive at their destination cost-effectively
+                      and reliably.
+                    </p>
+                  </div>
+                  <div>
+                    ${args.interactiveContent === 'link'
+                      ? html` <a href="#" class="link-icon">
+                          <post-icon name="3020" aria-hidden="true"></post-icon>
+                          <span>Learn more</span>
+                        </a>`
+                      : ''}
+                  </div>
+                </div>
+              </post-card-section>
+              ${args.size === 'medium' || args.size === 'large'
+                ? html`
+                    <post-card-section palette="alternate">
+                      <h5 class="h6">Sample Product</h5>
+                      <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
+                      <dl class="mt-16">
+                        <dt>bis 500 g</dt>
+                        <dd class="h3">1.20</dd>
+
+                        <dt>bis 50 g</dt>
+                        <dd class="h3">2.20</dd>
+                      </dl>
+                    </post-card-section>
+                  `
+                : ''}
+              ${args.size === 'large'
+                ? html`
+                    <post-card-section>
+                      <button class="btn btn-secondary w-full mb-12">
+                        <span>Order Sample Product</span>
+                      </button>
+
+                      <button class="btn btn-primary w-full">
+                        <span>Print Sample Product</span>
+                      </button>
+                    </post-card-section>
+                  `
+                : ''}
+            </post-card>
+          </div>
+        `,
+      );
+
+    const cardTeaserVariants = [
+      // Layout related combinations
+      ...bombArgs({
+        interactiveContent: ['button', 'link'],
+      }),
+    ]
+      // Map default template variants
+      .map(
+        args => html`
+          <div class="col-4 pb-16">
+            <post-card variant="card-teaser" img-src="https://picsum.photos/id/20/300/200">
+              <h3 class="mb-16">Product</h3>
+              <p class="lead">This is the product summary.</p>
+
+              ${args.interactiveContent === 'button'
+                ? html`<button class="btn btn-tertiary px-0">
+                    Button label <post-icon name="arrowright"></post-icon>
+                  </button>`
+                : ''}
+              ${args.interactiveContent === 'link'
+                ? html`<a class="card-link" href="#">Link one</a>`
+                : ''}
+            </post-card>
+          </div>
+        `,
+      );
+
+    const palettes = ['palette-alternate', 'palette-default'];
+
+    return html`
+      <h1>Card web component POC</h1>
+      <h2>Card product</h2>
+      <div class="container">
+        <div class="row">${cardProductVariants}</div>
+      </div>
+      <h2>Card</h2>
+      ${palettes.map(
+        palette => html`
+          <div class="${palette}">
+            <div class="container">
+              <div class="row">${cardVariants}</div>
+            </div>
+          </div>
+        `,
+      )}
+      <h2>Card teaser</h2>
+      ${palettes.map(
+        palette => html`
+          <div class="${palette}">
+            <div class="container">
+              <div class="row">${cardTeaserVariants}</div>
+            </div>
+          </div>
+        `,
+      )}
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/components/card/card.docs.mdx b/packages/documentation/src/stories/components/card/card.docs.mdx
index d4641f45c0..155639e7ec 100644
--- a/packages/documentation/src/stories/components/card/card.docs.mdx
+++ b/packages/documentation/src/stories/components/card/card.docs.mdx
@@ -7,7 +7,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
 <div className="docs-title">
   # Card
 
-  <link-design of={JSON.stringify(CardStories)}></link-design>
+<link-design of={JSON.stringify(CardStories)}></link-design>
+
 </div>
 
 <div className="lead">
@@ -68,3 +69,11 @@ Create lists of content in a card by simply using a flush list group in place of
 </div>
 
 <Canvas of={CardStories.BackgroundImage} />
+
+## Card Web Component POC
+
+Here are examples of what the card component would look like if it was a web component.
+
+<Canvas sourceState="shown" of={CardStories.CardWebComponent} />
+<Canvas sourceState="shown" of={CardStories.CardProductWebComponent} />
+<Canvas sourceState="shown" of={CardStories.CardTeaserWebComponent} />
diff --git a/packages/documentation/src/stories/components/card/card.stories.ts b/packages/documentation/src/stories/components/card/card.stories.ts
index 2cab6edbfd..1d22175bf6 100644
--- a/packages/documentation/src/stories/components/card/card.stories.ts
+++ b/packages/documentation/src/stories/components/card/card.stories.ts
@@ -20,6 +20,7 @@ const meta: MetaComponent = {
     },
   },
   args: {
+    isWebComponent: false,
     showImage: true,
     imagePosition: 'top',
     showHeader: false,
@@ -223,9 +224,7 @@ function gridContainer(story: StoryFn, context: StoryContext) {
 // RENDERER
 function getCardLinks() {
   return html`
-    ${['Link Text', 'More Link'].map(
-      label => html` <a class="card-link" href="#">${label}</a> `,
-    )}
+    ${['Link Text', 'More Link'].map(label => html` <a class="card-link" href="#">${label}</a> `)}
   `;
 }
 
@@ -243,7 +242,9 @@ function getCardBody({ customBody, content, action, showTitle, showSubtitle }: A
   return html`
     <div class="card-body">
       ${showTitle ? html` <h5 class="card-title">Card Title</h5> ` : nothing}
-      ${showSubtitle ? html` <h6 class="card-subtitle mb-8 text-muted">Card Subtitle</h6> ` : nothing}
+      ${showSubtitle
+        ? html` <h6 class="card-subtitle mb-8 text-muted">Card Subtitle</h6> `
+        : nothing}
       <p class="card-text">${content}</p>
       ${choose(
         action,
@@ -426,3 +427,78 @@ export const BackgroundImage: Story = {
   </div>`,
   },
 };
+
+export const CardWebComponent: Story = {
+  decorators: [gridContainer],
+  render: () => html`
+    <post-card img-src="https://picsum.photos/id/20/300/200" img-position="top">
+      <div slot="header">Card header</div>
+      <h5 class="card-title">Title</h5>
+      <h6 class="card-subtitle mb-8 text-muted">Subtitle</h6>
+      <p class="card-text">This is my text</p>
+      <button class="btn btn-tertiary px-0">
+        Button label <post-icon name="arrowright"></post-icon>
+      </button>
+      <div slot="footer">Card footer</div>
+    </post-card>
+  `,
+};
+
+export const CardProductWebComponent: Story = {
+  decorators: [gridContainer],
+  render: () => html`
+    <post-card variant="card-product">
+      <post-card-section palette="default">
+        <div class="product-navigation">
+          <div>
+            <h3>Affordable</h3>
+            <h4 class="mb-16">Sample Product</h4>
+            <p class="lead">
+              With SAMPLE PRODUCT, your letters arrive at their destination cost-effectively and
+              reliably.
+            </p>
+          </div>
+          <div>
+            <a href="#" class="link-icon">
+              <post-icon name="3020" aria-hidden="true"></post-icon>
+              <span>Learn more</span>
+            </a>
+          </div>
+        </div>
+      </post-card-section>
+      <post-card-section palette="alternate">
+        <h5 class="h6">Sample Product</h5>
+        <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
+        <dl class="mt-16">
+          <dt>bis 500 g</dt>
+          <dd class="h3">1.20</dd>
+
+          <dt>bis 50 g</dt>
+          <dd class="h3">2.20</dd>
+        </dl>
+      </post-card-section>
+      <post-card-section>
+        <button class="btn btn-secondary w-full mb-12">
+          <span>Order Sample Product</span>
+        </button>
+
+        <button class="btn btn-primary w-full">
+          <span>Print Sample Product</span>
+        </button>
+      </post-card-section>
+    </post-card>
+  `,
+};
+
+export const CardTeaserWebComponent: Story = {
+  decorators: [gridContainer],
+  render: () => html`
+    <post-card variant="card-teaser" img-src="https://picsum.photos/id/20/300/200">
+      <h3 class="mb-16">Product</h3>
+      <p class="lead">This is the product summary.</p>
+      <button class="btn btn-tertiary px-0">
+        Button label <post-icon name="arrowright"></post-icon>
+      </button>
+    </post-card>
+  `,
+};
diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss
index 3e834b4c30..8a97cd9c31 100644
--- a/packages/styles/src/components/card.scss
+++ b/packages/styles/src/components/card.scss
@@ -68,6 +68,16 @@ post-linkarea:has(> .card) {
   &.product-card {
     box-shadow: none;
 
+    > *:first-child {
+      border-top-left-radius: tokens.get('card-border-radius');
+      border-top-right-radius: tokens.get('card-border-radius');
+    }
+
+    > *:last-child {
+      border-bottom-left-radius: tokens.get('card-border-radius');
+      border-bottom-right-radius: tokens.get('card-border-radius');
+    }
+
     &:hover,
     &:focus {
       z-index: 1;