Promo card

Only the latest version (v2) is allowed for generation. Older versions are kept for reference and are deprecated.

Overview (v2)

Promo Card

The promo card component is a slot-based container for header content, a main visual, tags, and footer content. It supports configurable elevation levels and an inverted color style. The card becomes interactive when an interactive element (link, button, or masked link) is placed in its default slot.

Default variation

HTML

<oc-promo-card-v2>
<img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />
</oc-promo-card-v2>

Configuration

The promo card component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the promo card component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Promo Card UX documentation for detailed user experience guidelines.

Accessibility

The promo card component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Screen reader support

The interactive element you place in the default slot determines how the card is announced and operated by assistive technology. See the interactive component slots documentation for the supported element patterns (link, masked link, button, checkbox, radio) and their built-in keyboard and screen reader behavior.

Headline levels

The header-headline and footer-headline slots do not take a heading-level attribute. Slot a heading element (h1–h6) directly to control the semantic level, or a span/div if the content should not be announced as a heading.

<oc-promo-card-v2>
<a href="/sale" aria-label="Sale"></a>
<h2 slot="header-headline">New arrivals</h2>
<h3 slot="footer-headline">Up to 50% off</h3>
</oc-promo-card-v2>

Choose the heading level based on the surrounding page heading hierarchy, not the desired visual size. The heading level has no effect on the visual appearance of the headline, which is controlled entirely through CSS. If no heading element is slotted, the content is not exposed as a heading to assistive technology.

Role

The promo card does not set a role attribute by default. The interactive element you place in the default slot (see interactive component slots) already provides the correct role for that interaction, so the card itself does not need one.

Set a role attribute on oc-promo-card-v2 only if you need additional grouping or landmark semantics, for example:

• role="group" with aria-labelledby or aria-label when the card needs to be identified as a distinct labelled unit, such as within a list or carousel of promo cards.
• role="article" when the card represents a self-contained, syndicate-able piece of content.

Note

Never set the same role on both the host element and an element inside the card's shadow DOM — this can cause duplicate or conflicting announcements in assistive technology.

Configuration (v2)

Promo Card configuration

Configure the promo card component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

HTML

<oc-promo-card-v2>
<img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />
</oc-promo-card-v2>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

Migration (v2)

Migration from promo card v1 to v2

The oc-promo-card component has been updated from oc-promo-card-v1 to oc-promo-card-v2. This migration guide provides step-by-step instructions to update your project to the latest version.

Skip to:

• What's new

  • Flexible content

• API changes

  • Changed slots
  • New slots
  • Removed attributes

• How to migrate

  • Migrate a basic promo card
  • Migrate a promo card with headlines and footer text
  • Migrate a promo card using the deprecated main-headline attributes
  • Migrate a promo card with a masked link

What's new

Flexible content

The new slot-based architecture provides:

• Flexible content placement with named slots instead of text attributes
• Support for rich content, including HTML elements and custom heading levels
• Full control over the interactive element through the interactive component slots pattern (link, masked link, button, checkbox, radio) instead of fixed href/as-button attributes

API changes

Changed slots

The following slots have been changed:

New slots

The following slots have been added in v2:

Removed attributes

The following attributes have been removed and should now be set through slotted content or the default slot's interactive element:

How to migrate

The main change is that v2 moves all text-based attributes (headlines, overline, footer text) into named slots, and moves the interactive element from the primary-action slot into the default slot, while the former default slot (main image) is renamed to main.

Migrate a basic promo card

<!-- From: -->
<oc-promo-card-v1>
  <a slot="primary-action" href="/product" aria-label="Product name"></a>
  <img src="product.jpg" alt="" />
</oc-promo-card-v1>

<!-- To: -->
<oc-promo-card-v2>
  <a href="/product" aria-label="Product name"></a>
  <img slot="main" src="product.jpg" alt="" />
</oc-promo-card-v2>

Migrate a promo card with headlines and footer text

<!-- From: -->
<oc-promo-card-v1
  header-headline="New arrivals"
  header-headline-level="2"
  header-overline="Sale"
  footer-headline="Up to 50% off"
  footer-headline-level="3"
  footer-text="Valid while stocks last"
>
  <a slot="primary-action" href="/sale" aria-label="Sale"></a>
  <img src="sale.jpg" alt="" />
</oc-promo-card-v1>

<!-- To: -->
<oc-promo-card-v2>
  <a href="/sale" aria-label="Sale"></a>
  <span slot="header-overline">Sale</span>
  <h2 slot="header-headline">New arrivals</h2>
  <img slot="main" src="sale.jpg" alt="" />
  <h3 slot="footer-headline">Up to 50% off</h3>
  <span slot="footer-text">Valid while stocks last</span>
</oc-promo-card-v2>

Migrate a promo card using the deprecated main-headline attributes

The deprecated main-headline and main-headline-level attributes follow the same migration path as header-headline and header-headline-level.

<!-- From: -->
<oc-promo-card-v1 main-headline="New arrivals" main-headline-level="2">
  <a slot="primary-action" href="/sale" aria-label="Sale"></a>
  <img src="sale.jpg" alt="" />
</oc-promo-card-v1>

<!-- To: -->
<oc-promo-card-v2>
  <a href="/sale" aria-label="Sale"></a>
  <h2 slot="header-headline">New arrivals</h2>
  <img slot="main" src="sale.jpg" alt="" />
</oc-promo-card-v2>

Migrate a promo card with a masked link

<!-- From: -->
<oc-promo-card-v1 base64-href="L2ludGVybmFsL3BhZ2U=">
  <img src="product.jpg" alt="" />
</oc-promo-card-v1>

<!-- To: -->
<oc-promo-card-v2>
  <div role="link" tabindex="0" data-masked-ref="L2ludGVybmFsL3BhZ2U=" aria-label="oc-auto"></div>
  <img slot="main" src="product.jpg" alt="" />
</oc-promo-card-v2>

API v1 (v1, deprecated, not for generation)

Promo Card v1 API

API: <oc-promo-card-v1> (PromoCardV1)

The {Latest.default.name.toLowerCase()} component provides attributes for setting the main headline, overline, footer headline, footer text, and a link that the card directs to. The card is not interactive if no link is set. This component also provides slots for setting the main content, logo, and tags that appear in the card.

Attributes / properties

Slots

Events

CSS custom properties

API v2

Promo Card v2 API

API: <oc-promo-card-v2> (PromoCardV2)

The promo card component is a slot-based container for header content, a main visual, tags, and footer content. It supports configurable elevation levels and an inverted color style. The card becomes interactive when an interactive element (link, button, or masked link) is placed in its default slot.

Attributes / properties

Slots

Events

CSS custom properties

Variations (v2)

Variations

Listed below are the most common variations of the promo card component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-promo-card-variations--default · tags: components, promo-card, 2, variations

The default configuration uses the main slot with a 4:3 aspect ratio image.

Args: mainSlot=(see snippet)

HTML

<oc-promo-card-v2>
<img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />
</oc-promo-card-v2>

Inverted

Story: components-promo-card-variations--inverted · tags: components, promo-card, 2, variations

The inverted configuration uses the main slot with a 4:3 aspect ratio image and inverted colors.

Args: mainSlot=(see snippet), inverted=true

HTML

<oc-promo-card-v2 inverted>
<img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />
</oc-promo-card-v2>

With button behavior

Story: components-promo-card-variations--with-button-behavior · tags: components, promo-card, 2, variations

Putting an empty <button> tag into the default slot makes the promo card behave as a button.

Args: defaultSlot=<button aria-label="oc-auto"></button>, mainSlot=(see snippet)

HTML

<oc-promo-card-v2>
<img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />
<button  aria-label="oc-auto"></button>
</oc-promo-card-v2>

With checked behavior

Story: components-promo-card-variations--with-checked-behavior · tags: components, promo-card, 2, variations

The promo card component can also be used with checkbox/radio behavior by placing an input element in the default slot.

Args: mainSlot=(see snippet)

<h2>Checkbox</h2>
<div class="row">
  <oc-promo-card-v2 class="${className}" >
    <input type="checkbox" aria-label="oc-auto" />
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
  <oc-promo-card-v2 class="${className}" >
    <input type="checkbox" aria-label="oc-auto" checked />
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
  <oc-promo-card-v2 class="${className}" >
    <input type="checkbox" aria-label="oc-auto" />
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
</div>

<h2>Radio button</h2>
<div class="row">
  <oc-promo-card-v2 class="${className}" >
    <input type="radio" name="media-object-card-selection-demo" aria-label="oc-auto" />
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
  <oc-promo-card-v2 class="${className}" >
    <input
      type="radio"
      name="media-object-card-selection-demo"
      aria-label="oc-auto"
      checked
    />
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
  <oc-promo-card-v2 class="${className}" >
    <input type="radio" name="media-object-card-selection-demo" aria-label="oc-auto" />
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
</div>

<h2>Switch button</h2>
<div class="row">
  <oc-promo-card-v2 class="${className}" >
    <button role="switch" aria-checked="false" aria-label="oc-auto"></button>
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
  <oc-promo-card-v2 class="${className}" >
    <button role="switch" aria-checked="true" aria-label="oc-auto"></button>
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
  <oc-promo-card-v2 class="${className}" >
    <button role="switch" aria-checked="false" aria-label="oc-auto"></button>
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
</div>

<h2>Current-marked link</h2>
<div class="row">
  <oc-promo-card-v2 class="${className}" >
    <a href="#" aria-label="oc-auto"></a>
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
  <oc-promo-card-v2 class="${className}" >
    <a href="#" aria-current="page" aria-label="oc-auto"></a>
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
  <oc-promo-card-v2 class="${className}" >
    <a href="#" aria-label="oc-auto"></a>
    ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}
  <img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
  </oc-promo-card-v2>
</div>

${css}

<style>
  .row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }

  .row > oc-promo-card-v2 {
    width: 200px;
  }

  h2 {
    margin-top: 16px;
  }
</style>

{
  name: "With checked behavior",
  args: {
    mainSlot: `
  <img
      slot="main"
      src="${placeholderImage}"
      alt="placeholder image"
    />`
  },
  render({
    headerHeadlineSlot,
    headerOverlineSlot,
    headerLogoSlot,
    mainSlot,
    tagsSlot,
    footerHeadlineSlot,
    footerTextSlot,
    actionSignifierHeaderSlot,
    actionSignifierFooterSlot,
    ...props
  }) {
    const {
      css,
      className
    } = cssVariablesExample(props);
    return html`
      <h2>Checkbox</h2>
      <div class="row">
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <input type="checkbox" aria-label="oc-auto" />
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <input type="checkbox" aria-label="oc-auto" checked />
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <input type="checkbox" aria-label="oc-auto" />
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
      </div>

      <h2>Radio button</h2>
      <div class="row">
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <input type="radio" name="media-object-card-selection-demo" aria-label="oc-auto" />
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <input
            type="radio"
            name="media-object-card-selection-demo"
            aria-label="oc-auto"
            checked
          />
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <input type="radio" name="media-object-card-selection-demo" aria-label="oc-auto" />
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
      </div>

      <h2>Switch button</h2>
      <div class="row">
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <button role="switch" aria-checked="false" aria-label="oc-auto"></button>
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <button role="switch" aria-checked="true" aria-label="oc-auto"></button>
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <button role="switch" aria-checked="false" aria-label="oc-auto"></button>
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
      </div>

      <h2>Current-marked link</h2>
      <div class="row">
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <a href="#" aria-label="oc-auto"></a>
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <a href="#" aria-current="page" aria-label="oc-auto"></a>
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
        <oc-promo-card-v2 class="${className}" ${spread(props)}>
          <a href="#" aria-label="oc-auto"></a>
          ${unsafeHTML(headerHeadlineSlot)}${unsafeHTML(headerOverlineSlot)}${unsafeHTML(headerLogoSlot)}${unsafeHTML(mainSlot)}${unsafeHTML(tagsSlot)}${unsafeHTML(footerHeadlineSlot)}${unsafeHTML(footerTextSlot)}${unsafeHTML(actionSignifierHeaderSlot)}${unsafeHTML(actionSignifierFooterSlot)}
        </oc-promo-card-v2>
      </div>

      ${css}

      <style>
        .row {
          display: flex;
          gap: 16px;
          flex-wrap: wrap;
          margin-bottom: 24px;
        }

        .row > oc-promo-card-v2 {
          width: 200px;
        }

        h2 {
          margin-top: 16px;
        }
      </style>
    `;
  }
}

With link behavior

Story: components-promo-card-variations--with-link-behavior · tags: components, promo-card, 2, variations

The promo card component with an <a> tag as default slot content behaves as a link. Search engines will detect the href.

Args: defaultSlot=<a href="#" aria-label="oc-auto"></a>, mainSlot=(see snippet)

HTML

<oc-promo-card-v2>
<img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />
<a href="#"  aria-label="oc-auto"></a>
</oc-promo-card-v2>

With masked link behavior

Story: components-promo-card-variations--with-masked-link-behavior · tags: components, promo-card, 2, variations

The promo card component as a masked link. Search engines will not detect the href.

Args: defaultSlot=<div role="link" tabindex="0" data-masked-ref="Iw==" aria-label="oc-auto"></div>, mainSlot=(see snippet)

HTML

<oc-promo-card-v2>
<img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />
<div role="link" tabindex="0" data-masked-ref="Iw=="  aria-label="oc-auto"></div>
</oc-promo-card-v2>

With link switch behavior

Story: components-promo-card-variations--with-link-switch-behavior · tags: components, promo-card, 2, variations

The promo card component as a link with switch behavior. Search engines will detect the href, while users receive the Base64-encoded version.

Args: defaultSlot=<a href="#" data-masked-ref="Iz92YXJpYW50PWZvbw==" aria-label="oc-auto"></a>, mainSlot=(see snippet)

HTML

<oc-promo-card-v2>
<img
      slot="main"
      src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
      alt="placeholder image"
    />
<a href="#" data-masked-ref="Iz92YXJpYW50PWZvbw=="  aria-label="oc-auto"></a>
</oc-promo-card-v2>

With action signifier

Story: components-promo-card-variations--with-action-signifier · tags: components, promo-card, 2, variations

The promo card component with a header and footer action signifier.

Args: headerHeadlineSlot=<span slot="header-headline">Main headline</span>, headerOverlineSlot=<span slot="header-overline">Overline</span>, footerHeadlineSlot=<span slot="footer-headline">Footer headline</span>, footerTextSlot=<span slot="footer-text">Footer text</span>, actionSignifierHeaderSlot=<oc-action-signifier-v1 slot="action-signifier-header" variant="text" label="Action"></oc-action-signifier-v1>, actionSignifierFooterSlot=<oc-action-signifier-v1 slot="action-signifier-footer" variant="text" label="Action"></oc-action-signifier-v1>, defaultSlot=<a href="#" aria-label="oc-auto"></a>, mainSlot=(see snippet), tagsSlot=(see snippet), headerLogoSlot=(see snippet)

Main headline Overline Footer headline Footer text -12% -20% Extra Label

HTML

<oc-promo-card-v2>
<span slot="header-headline">Main headline</span>
<span slot="header-overline">Overline</span>
<span slot="footer-headline">Footer headline</span>
<span slot="footer-text">Footer text</span>
<oc-action-signifier-v1 slot="action-signifier-header" variant="text" label="Action"></oc-action-signifier-v1>
<oc-action-signifier-v1 slot="action-signifier-footer" variant="text" label="Action"></oc-action-signifier-v1>
<picture slot="main"
        ><source
          srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          media="(min-width: 48em)"
          type="image/webp" />
        <source
          srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          media="(min-width: 48em)" />
        <img
          src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          alt="placeholder image"
      /></picture>
<oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
<img slot="header-logo" src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png" alt="Placeholder logo" />
<a href="#"  aria-label="oc-auto"></a>
</oc-promo-card-v2>

Ratio 4:3

Story: components-promo-card-variations--ratio-4-to-3 · tags: components, promo-card, 2, variations

Variation that uses the slots header-headline, header-overline, footer-headline, and footer-text with a 4:3 aspect ratio image.

Args: headerHeadlineSlot=<span slot="header-headline">Main headline</span>, headerOverlineSlot=<span slot="header-overline">Overline</span>, footerHeadlineSlot=<span slot="footer-headline">Footer headline</span>, footerTextSlot=<span slot="footer-text">Footer text</span>, defaultSlot=<a href="#" aria-label="oc-auto"></a>, mainSlot=(see snippet), tagsSlot=(see snippet), elevation-level=stacked, headerLogoSlot=(see snippet)

Main headline Overline Footer headline Footer text -12% -20% Extra Label

HTML

<oc-promo-card-v2 elevation-level="stacked">
<span slot="header-headline">Main headline</span>
<span slot="header-overline">Overline</span>
<span slot="footer-headline">Footer headline</span>
<span slot="footer-text">Footer text</span>
<picture slot="main"
        ><source
          srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          media="(min-width: 48em)"
          type="image/webp" />
        <source
          srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          media="(min-width: 48em)" />
        <img
          src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          alt="placeholder image"
      /></picture>
<oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
<img slot="header-logo" src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png" alt="Placeholder logo" />
<a href="#"  aria-label="oc-auto"></a>
</oc-promo-card-v2>

Ratio 8:3

Story: components-promo-card-variations--ratio-8-to-3 · tags: components, promo-card, 2, variations

Variation that uses the slots header-headline, header-overline, footer-headline, footer-text, tags, and header-logo with a 8:3 aspect ratio image.

Args: headerHeadlineSlot=<span slot="header-headline">Main headline</span>, headerOverlineSlot=<span slot="header-overline">Overline</span>, footerHeadlineSlot=<span slot="footer-headline">Footer headline</span>, footerTextSlot=<span slot="footer-text">Footer text</span>, defaultSlot=<a href="#" aria-label="oc-auto"></a>, mainSlot=(see snippet), tagsSlot=(see snippet), headerLogoSlot=(see snippet)

Main headline Overline Footer headline Footer text -12% -20% Extra Label

HTML

<oc-promo-card-v2>
<span slot="header-headline">Main headline</span>
<span slot="header-overline">Overline</span>
<span slot="footer-headline">Footer headline</span>
<span slot="footer-text">Footer text</span>
<picture slot="main"
        ><source
          srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          media="(min-width: 48em)"
          type="image/webp" />
        <source
          srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          media="(min-width: 48em)" />
        <img
          src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          alt="placeholder image"
      /></picture>
<oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
<img slot="header-logo" src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png" alt="Placeholder logo" />
<a href="#"  aria-label="oc-auto"></a>
</oc-promo-card-v2>

With picture logo

Story: components-promo-card-variations--with-picture-logo · tags: components, promo-card, 2, variations

Variation that uses a <picture> element in the header-logo slot, demonstrating responsive logo support.

Args: headerHeadlineSlot=<span slot="header-headline">Main headline</span>, headerOverlineSlot=<span slot="header-overline">Overline</span>, footerHeadlineSlot=<span slot="footer-headline">Footer headline</span>, footerTextSlot=<span slot="footer-text">Footer text</span>, defaultSlot=<a href="#" aria-label="oc-auto"></a>, mainSlot=(see snippet), headerLogoSlot=(see snippet)

Main headline Overline Footer headline Footer text

HTML

<oc-promo-card-v2>
<span slot="header-headline">Main headline</span>
<span slot="header-overline">Overline</span>
<span slot="footer-headline">Footer headline</span>
<span slot="footer-text">Footer text</span>
<picture slot="main"
        ><source
          srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          media="(min-width: 48em)"
          type="image/webp" />
        <source
          srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          media="(min-width: 48em)" />
        <img
          src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
          alt="placeholder image"
      /></picture>
<picture slot="header-logo"><source srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png" media="(min-width: 48em)" type="image/webp" /><img src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png" alt="Placeholder logo" /></picture>
<a href="#" aria-label="oc-auto"></a>
</oc-promo-card-v2>

Demo: Long texts and broad logo

Story: components-promo-card-variations--demo-long-texts-and-broad-logo · tags: components, promo-card, 2, variations

Variation that uses the slots header-headline, header-overline, footer-headline, footer-text, tags, and header-logo with a 16:9 aspect ratio image.

<oc-promo-card-v2>
  <a href="#" aria-label="oc-auto"></a>
  <span slot="header-headline"
    >Main headline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum.</span
  >
  <span slot="header-overline"
    >Overline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
    accusam et justo duo dolores et ea rebum.</span
  >
  <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
  <picture slot="main">
    <source srcset="${placeholderImage}" media="(min-width: 48em)" type="image/webp" />
    <source srcset="${placeholderImage}" media="(min-width: 48em)" />
    <img src="${placeholderImage}" alt="placeholder image" />
  </picture>
  <span slot="footer-headline"
    >Footer headline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum.</span
  >
  <span slot="footer-text"
    >Footer text – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span
  >
  <oc-tag-v1
    slot="tags"
    size="50"
    size-l="100"
    variant="sale"
    show-info-icon
    class="oc-secondary-action"
    >-12%</oc-tag-v1
  >
  <oc-tag-v1
    slot="tags"
    size="50"
    size-l="100"
    variant="sale"
    show-info-icon
    class="oc-secondary-action"
    >-20% Extra
  </oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
</oc-promo-card-v2>

{
  name: "Demo: Long texts and broad logo",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html` <oc-promo-card-v2>
      <a href="#" aria-label="oc-auto"></a>
      <span slot="header-headline"
        >Main headline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
        eos et accusam et justo duo dolores et ea rebum.</span
      >
      <span slot="header-overline"
        >Overline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
        accusam et justo duo dolores et ea rebum.</span
      >
      <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
      <picture slot="main">
        <source srcset="${placeholderImage}" media="(min-width: 48em)" type="image/webp" />
        <source srcset="${placeholderImage}" media="(min-width: 48em)" />
        <img src="${placeholderImage}" alt="placeholder image" />
      </picture>
      <span slot="footer-headline"
        >Footer headline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
        eos et accusam et justo duo dolores et ea rebum.</span
      >
      <span slot="footer-text"
        >Footer text – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
        eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span
      >
      <oc-tag-v1
        slot="tags"
        size="50"
        size-l="100"
        variant="sale"
        show-info-icon
        class="oc-secondary-action"
        >-12%</oc-tag-v1
      >
      <oc-tag-v1
        slot="tags"
        size="50"
        size-l="100"
        variant="sale"
        show-info-icon
        class="oc-secondary-action"
        >-20% Extra
      </oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
    </oc-promo-card-v2>`;
  }
}

Demo: Multiple Promo Cards

Story: components-promo-card-variations--demo-multiple-promo-cards · tags: components, promo-card, 2, variations

Variation that uses the slots header-headline, header-overline, footer-headline, footer-text, tags, and main with a 16:9 aspect ratio image.

<div style="display: flex; gap: 16px;">
  <oc-promo-card-v2 style="flex: 1">
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text"
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
    >
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>
  <oc-promo-card-v2 style="flex: 1">
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text">Lorem ipsum dolor sit</span>
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
  </oc-promo-card-v2>
  <oc-promo-card-v2 style="flex: 1">
    <a href="#" aria-label="oc-auto"></a>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text">Lorem ipsum dolor sit.</span>
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>
</div>

{
  name: "Demo: Multiple Promo Cards",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <div style="display: flex; gap: 16px;">
        <oc-promo-card-v2 style="flex: 1">
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text"
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
          >
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>
        <oc-promo-card-v2 style="flex: 1">
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text">Lorem ipsum dolor sit</span>
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
        </oc-promo-card-v2>
        <oc-promo-card-v2 style="flex: 1">
          <a href="#" aria-label="oc-auto"></a>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text">Lorem ipsum dolor sit.</span>
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>
      </div>
    `;
  }
}

Demo: Multiple Promo Cards with Action Signifier

Story: components-promo-card-variations--demo-multiple-promo-cards-with-action-signifier · tags: components, promo-card, 2, variations

Variation that uses action signifiers in the header and footer.

<div style="display: flex; gap: 16px;">
  <oc-promo-card-v2 style="flex: 1">
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text"
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
    >
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <oc-action-signifier-v1
      slot="action-signifier-header"
      variant="icon"
    ></oc-action-signifier-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>
  <oc-promo-card-v2 style="flex: 1">
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text">Lorem ipsum dolor sit</span>
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <oc-action-signifier-v1
      slot="action-signifier-header"
      variant="text"
      label="Action"
    ></oc-action-signifier-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
  </oc-promo-card-v2>
  <oc-promo-card-v2 style="flex: 1">
    <a href="#" aria-label="oc-auto"></a>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text">Lorem ipsum dolor sit.</span>
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
    <oc-action-signifier-v1
      slot="action-signifier-footer"
      variant="icon"
    ></oc-action-signifier-v1>
  </oc-promo-card-v2>
  <oc-promo-card-v2 style="flex: 1">
    <a href="#" aria-label="oc-auto"></a>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text">Lorem ipsum dolor sit.</span>
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
    <oc-action-signifier-v1
      slot="action-signifier-footer"
      variant="text"
      label="Action"
    ></oc-action-signifier-v1>
  </oc-promo-card-v2>
</div>

{
  name: "Demo: Multiple Promo Cards with Action Signifier",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <div style="display: flex; gap: 16px;">
        <oc-promo-card-v2 style="flex: 1">
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text"
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
          >
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <oc-action-signifier-v1
            slot="action-signifier-header"
            variant="icon"
          ></oc-action-signifier-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>
        <oc-promo-card-v2 style="flex: 1">
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text">Lorem ipsum dolor sit</span>
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <oc-action-signifier-v1
            slot="action-signifier-header"
            variant="text"
            label="Action"
          ></oc-action-signifier-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
        </oc-promo-card-v2>
        <oc-promo-card-v2 style="flex: 1">
          <a href="#" aria-label="oc-auto"></a>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text">Lorem ipsum dolor sit.</span>
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
          <oc-action-signifier-v1
            slot="action-signifier-footer"
            variant="icon"
          ></oc-action-signifier-v1>
        </oc-promo-card-v2>
        <oc-promo-card-v2 style="flex: 1">
          <a href="#" aria-label="oc-auto"></a>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text">Lorem ipsum dolor sit.</span>
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
          <oc-action-signifier-v1
            slot="action-signifier-footer"
            variant="text"
            label="Action"
          ></oc-action-signifier-v1>
        </oc-promo-card-v2>
      </div>
    `;
  }
}

Demo: Multiple Promo Cards with elevation

Story: components-promo-card-variations--demo-multiple-promo-cards-with-elevation · tags: components, promo-card, 2, variations

Variation that uses the slots header-headline, header-overline, footer-headline, footer-text, tags, and main with a 16:9 aspect ratio image. Also uses the elevation-level attribute.

<div style="display: flex; gap: 16px;">
  <oc-promo-card-v2 style="flex: 1" elevation-level="canvas">
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text"
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
    >
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>

  <div style="flex: 1; background-color: #fff; padding: 16px">
    <oc-promo-card-v2 style="flex: 1" elevation-level="stacked">
      <a href="#" aria-label="oc-auto"></a>
      <span slot="header-headline">Main headline</span>
      <span slot="header-overline">Overline</span>
      <span slot="footer-headline">Footer headline</span>
      <span slot="footer-text">Lorem ipsum dolor sit</span>
      <img slot="main" src="${placeholderImage}" alt="placeholder image" />
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
    </oc-promo-card-v2>
  </div>
  <oc-promo-card-v2 style="flex: 1" elevation-level="above">
    <a href="#" aria-label="oc-auto"></a>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text">Lorem ipsum dolor sit.</span>
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>
  <oc-promo-card-v2 style="flex: 1" elevation-level="sticky">
    <a href="#" aria-label="oc-auto"></a>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text">Lorem ipsum dolor sit.</span>
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>
</div>

{
  name: "Demo: Multiple Promo Cards with elevation",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <div style="display: flex; gap: 16px;">
        <oc-promo-card-v2 style="flex: 1" elevation-level="canvas">
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text"
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
          >
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>

        <div style="flex: 1; background-color: #fff; padding: 16px">
          <oc-promo-card-v2 style="flex: 1" elevation-level="stacked">
            <a href="#" aria-label="oc-auto"></a>
            <span slot="header-headline">Main headline</span>
            <span slot="header-overline">Overline</span>
            <span slot="footer-headline">Footer headline</span>
            <span slot="footer-text">Lorem ipsum dolor sit</span>
            <img slot="main" src="${placeholderImage}" alt="placeholder image" />
            <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
            <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
          </oc-promo-card-v2>
        </div>
        <oc-promo-card-v2 style="flex: 1" elevation-level="above">
          <a href="#" aria-label="oc-auto"></a>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text">Lorem ipsum dolor sit.</span>
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>
        <oc-promo-card-v2 style="flex: 1" elevation-level="sticky">
          <a href="#" aria-label="oc-auto"></a>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text">Lorem ipsum dolor sit.</span>
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>
      </div>
    `;
  }
}

Demo: Background color

Story: components-promo-card-variations--demo-background-color · tags: components, promo-card, 2, variations

Demo: Multiple Promo Cards with different background colors

Args: inverted=true

<div style="display: flex; gap: 16px; flex-wrap: wrap">
  <oc-promo-card-v2 style="flex: 0 0 240px" elevation-level="canvas" inverted="true">
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text"
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
    >
    <img
      slot="main"
      src="https://i.otto.de/i/otto/4acf54bf-6fd2-5b57-89d2-a6a91778a95d?$teat_product_ddt_xl$&fmt=webp"
      alt="placeholder image"
    />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1
      slot="tags"
      size="50"
      size-l="100"
      variant="sale"
      show-info-icon
      class="oc-secondary-action"
      >-12%</oc-tag-v1
    >
    <oc-tag-v1
      slot="tags"
      size="50"
      size-l="100"
      variant="sale"
      show-info-icon
      class="oc-secondary-action"
      >-20% Extra</oc-tag-v1
    >
    <oc-tag-v1
      slot="tags"
      size="50"
      size-l="100"
      variant="info-primary"
      show-info-icon
      class="oc-secondary-action"
      >Label
    </oc-tag-v1>
  </oc-promo-card-v2>

  <oc-promo-card-v2
    style="flex: 0 0 240px; --background-color: #1E5A78"
    elevation-level="canvas"
    inverted="true"
  >
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text"
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
    >
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>

  <oc-promo-card-v2
    style="flex: 0 0 240px; --background-color: #5E8114"
    elevation-level="canvas"
    inverted="true"
  >
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text"
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
    >
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>

  <oc-promo-card-v2
    style="flex: 0 0 240px; --background-color: #6C49CF"
    elevation-level="canvas"
    inverted="true"
  >
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text"
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
    >
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>

  <oc-promo-card-v2
    style="flex: 0 0 240px; --background-color: #801489"
    elevation-level="canvas"
    inverted="true"
  >
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text"
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
    >
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>

  <oc-promo-card-v2
    style="flex: 0 0 240px; --background-color: #8C2D4B"
    elevation-level="canvas"
    inverted="true"
  >
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text"
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
    >
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>

  <oc-promo-card-v2
    style="flex: 0 0 240px; --background-color: #E95D21"
    elevation-level="canvas"
    inverted="true"
  >
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text"
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
    >
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>

  <oc-promo-card-v2
    style="flex: 0 0 240px; --background-color: #9E790D"
    elevation-level="canvas"
    inverted="true"
  >
    <a href="#" aria-label="oc-auto"></a>
    <span slot="header-headline">Main headline</span>
    <span slot="header-overline">Overline</span>
    <span slot="footer-headline">Footer headline</span>
    <span slot="footer-text"
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
    >
    <img slot="main" src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v2>
</div>

{
  name: "Demo: Background color",
  parameters: {
    controls: {
      disabled: true
    }
  },
  args: {
    inverted: true
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <div style="display: flex; gap: 16px; flex-wrap: wrap">
        <oc-promo-card-v2 style="flex: 0 0 240px" elevation-level="canvas" inverted="true">
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text"
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
          >
          <img
            slot="main"
            src="https://i.otto.de/i/otto/4acf54bf-6fd2-5b57-89d2-a6a91778a95d?$teat_product_ddt_xl$&fmt=webp"
            alt="placeholder image"
          />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1
            slot="tags"
            size="50"
            size-l="100"
            variant="sale"
            show-info-icon
            class="oc-secondary-action"
            >-12%</oc-tag-v1
          >
          <oc-tag-v1
            slot="tags"
            size="50"
            size-l="100"
            variant="sale"
            show-info-icon
            class="oc-secondary-action"
            >-20% Extra</oc-tag-v1
          >
          <oc-tag-v1
            slot="tags"
            size="50"
            size-l="100"
            variant="info-primary"
            show-info-icon
            class="oc-secondary-action"
            >Label
          </oc-tag-v1>
        </oc-promo-card-v2>

        <oc-promo-card-v2
          style="flex: 0 0 240px; --background-color: #1E5A78"
          elevation-level="canvas"
          inverted="true"
        >
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text"
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
          >
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>

        <oc-promo-card-v2
          style="flex: 0 0 240px; --background-color: #5E8114"
          elevation-level="canvas"
          inverted="true"
        >
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text"
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
          >
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>

        <oc-promo-card-v2
          style="flex: 0 0 240px; --background-color: #6C49CF"
          elevation-level="canvas"
          inverted="true"
        >
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text"
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
          >
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>

        <oc-promo-card-v2
          style="flex: 0 0 240px; --background-color: #801489"
          elevation-level="canvas"
          inverted="true"
        >
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text"
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
          >
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>

        <oc-promo-card-v2
          style="flex: 0 0 240px; --background-color: #8C2D4B"
          elevation-level="canvas"
          inverted="true"
        >
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text"
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
          >
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>

        <oc-promo-card-v2
          style="flex: 0 0 240px; --background-color: #E95D21"
          elevation-level="canvas"
          inverted="true"
        >
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text"
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
          >
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>

        <oc-promo-card-v2
          style="flex: 0 0 240px; --background-color: #9E790D"
          elevation-level="canvas"
          inverted="true"
        >
          <a href="#" aria-label="oc-auto"></a>
          <span slot="header-headline">Main headline</span>
          <span slot="header-overline">Overline</span>
          <span slot="footer-headline">Footer headline</span>
          <span slot="footer-text"
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span
          >
          <img slot="main" src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v2>
      </div>
    `;
  }
}

Interaction tests (PromoCardV2.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Action slot link is focusable and clickable

Story: components-promo-card-interaction-tests--action-slot-link-is-clickable · tags: components, promo-card, 2, interactions, play-fn

Args: defaultSlot=<a href="#" aria-label="link"></a>

{
  name: "Action slot link is focusable and clickable",
  args: {
    defaultSlot: `<a href="#" aria-label="link"></a>`
  },
  play: async ({
    canvasElement
  }) => {
    const card = canvasElement.querySelector("oc-promo-card-v2")!;
    const link = card.querySelector("a")!;
    await expect(link, "link should be in the DOM").toBeTruthy();
    await userEvent.tab();
    await expect(document.activeElement, "link should receive focus via Tab").toBe(link);
  }
}

V1 (v1, deprecated, not for generation)

Promo card

The promo card component provides attributes for setting the main headline, overline, footer headline, footer text, and a link that the card directs to. The card is not interactive if no link is set. This component also provides slots for setting the main content, logo, and tags that appear in the card.

Default variation

<oc-promo-card-v1>
  <img
        src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
        alt="placeholder image"
      />
</oc-promo-card-v1>

Configuration

The promo card is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the promo card component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Promo card UX documentation for detailed user experience guidelines.

Accessibility

The promo card component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Multiple interactions

The promo card component can have multiple interactions:

• The primary-action is the main action that's triggered when the user clicks on the card.
• The secondary-action is an additional action that's triggered when the user clicks on a specific element within the card.
• Use the CSS class oc-secondary-action to define the secondary action.

<oc-promo-card-v2>
  <!-- Place the <a> tag in the light DOM to improve SEO.-->
  <!-- Use aria-label if the <a> tag needs to be empty. -->
  <a slot="primary-action" href="#" aria-label="Card"></a>
  <oc-button-v1 class="oc-secondary-action">Secondary action</oc-button-v1>
</oc-promo-card-v2>

Screen reader support

By default, when an interactive promo card is focused, the screen reader reads the content or labels of all its elements. The screen reader can read the following elements: overline, mainHeadline, logo, tags, mainContent, footerHeadline, and footerText. Keep in mind to provide meaningful alternative texts for the logo and images, if used, via the oc-aria-label attribute. If you want the screen reader to read only a subset of the elements, you can use the oc-aria-visible-elements attribute to specify which elements should be read.

Use oc-aria-label

To make the promo card recognizable for screen readers, use the oc-aria-label attribute to provide clear and descriptive context information. See the general accessibility documentation for guidance on using oc-aria-label, including how it works with link and masked link behavior.

V1/Configuration (v1, deprecated, not for generation)

Promo card configuration

Configure the promo card component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

<oc-promo-card-v1>
  <img
        src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
        alt="placeholder image"
      />
</oc-promo-card-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

V1/Interaction tests (PromoCardV1.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Should Handle Base 64 Href

Story: components-promo-card-v1-interaction-tests--should-handle-base-64-href · tags: play-fn

<!-- Wrapper to limit the width-->
<div style="width: 360px">
  <!-- The component-->
  <oc-promo-card-v1 base64-href="L2Zvbw==">
    <img src=${placeholderImage} alt="blue checkered background" />
  </oc-promo-card-v1>
</div>

{
  render() {
    return html`
      <!-- Wrapper to limit the width-->
      <div style="width: 360px">
        <!-- The component-->
        <oc-promo-card-v1 base64-href="L2Zvbw==">
          <img src=${placeholderImage} alt="blue checkered background" />
        </oc-promo-card-v1>
      </div>
    `;
  },
  async play({
    canvasElement
  }) {
    const ocPromoCard = canvasElement.getElementsByTagName("oc-promo-card-v1").item(0)!;
    ocPromoCard.focus();
    await tick();

    // instead of the div element there should now be an anchor element
    const linkElement = deepQuerySelector<HTMLAnchorElement>(ocPromoCard, ".card__interactive")!;
    await expect(linkElement.tagName).toBe("A");

    // anchor element inside the shadow root should have the correct href attribute
    await expect(linkElement.getAttribute("href")).toBe(`/foo`);

    // anchor element inside the shadow root should have the same fully href as the host
    await expect(ocPromoCard.href).toBe(`${window.location.origin}/foo`);
    await expect(linkElement.href).toBe(`${window.location.origin}/foo`);
  }
}

V1/Variations (v1, deprecated, not for generation)

Variations

Listed below are the most common variations of the promo card component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-promo-card-v1-variations--default · tags: components

The default configuration uses the default slot with a 4:3 aspect ratio image.

Args: defaultSlot=(see snippet)

<oc-promo-card-v1>
  <img
        src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
        alt="placeholder image"
      />
</oc-promo-card-v1>

Inverted

Story: components-promo-card-v1-variations--inverted · tags: components

The inverted configuration uses the default slot with a 4:3 aspect ratio image and inverted colors.

Args: defaultSlot=(see snippet), inverted=true

<oc-promo-card-v1 inverted>
  <img
        src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
        alt="placeholder image"
      />
</oc-promo-card-v1>

With button behavior

Story: components-promo-card-v1-variations--with-button-behavior · tags: components

Args: defaultSlot=(see snippet), as-button=true

<oc-promo-card-v1 as-button>
  <img
        src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
        alt="placeholder image"
      />
</oc-promo-card-v1>

With link behavior

Story: components-promo-card-v1-variations--with-link-behavior · tags: components

The promo card component with a link as primary action. Search engines will detect the href.

Args: primaryActionSlot=(see snippet), defaultSlot=(see snippet)

<oc-promo-card-v1>
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a slot="primary-action" href="#" aria-label="my placeholder promo card"></a>
  <img
        src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
        alt="placeholder image"
      />
</oc-promo-card-v1>

With masked link behavior

Story: components-promo-card-v1-variations--with-masked-link-behavior · tags: components

The promo card component as a masked link. Search engines will not detect the href.

Args: base64-href=Iw==, defaultSlot=(see snippet)

<oc-promo-card-v1 base64-href="Iw==">
  <img
        src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
        alt="placeholder image"
      />
</oc-promo-card-v1>

With link switch behavior

Story: components-promo-card-v1-variations--with-link-switch-behavior · tags: components

The promo card component as a link with switch behavior. Search engines will detect the href, while users receive the Base64-encoded version.

Args: base64-href=Iz92YXJpYW50PWZvbw==, primaryActionSlot=(see snippet), defaultSlot=(see snippet)

<oc-promo-card-v1 base64-href="Iz92YXJpYW50PWZvbw==">
  <!--Search engines will detect the href, while users receive the Base64-encoded version.--><a href='#' slot="primary-action" aria-label='Promo Card'></a>
  <img
        src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
        alt="placeholder image"
      />
</oc-promo-card-v1>

With action signifier

Story: components-promo-card-v1-variations--with-action-signifier · tags: components

The promo card component with a header and footer action signifier.

Args: header-headline=Main headline, header-overline=Overline, footer-headline=Footer headline, footer-text=Footer text, actionSignifierHeaderSlot=<oc-action-signifier-v1 slot="action-signifier-header" variant="text" label="Action"></oc-action-signifier-v1>, actionSignifierFooterSlot=<oc-action-signifier-v1 slot="action-signifier-footer" variant="text" label="Action"></oc-action-signifier-v1>, primaryActionSlot=<a href="#" aria-label="placeholder promo card" slot="primary-action"></a>, defaultSlot=(see snippet), tagsSlot=(see snippet), headerLogoSlot=(see snippet)

<oc-promo-card-v1 header-headline="Main headline" header-overline="Overline" footer-headline="Footer headline" footer-text="Footer text">
  <oc-action-signifier-v1 slot="action-signifier-header" variant="text" label="Action"></oc-action-signifier-v1>
  <oc-action-signifier-v1 slot="action-signifier-footer" variant="text" label="Action"></oc-action-signifier-v1>
  <a href="#" aria-label="placeholder promo card" slot="primary-action"></a>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
        <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
        <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
  <img slot="header-logo" src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png" alt="Placeholder logo" />
  <picture
          ><source
            srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
            media="(min-width: 48em)"
            type="image/webp" />
          <source
            srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
            media="(min-width: 48em)" />
          <img
            src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
            alt="placeholder image"
        /></picture>
</oc-promo-card-v1>

Ratio 4:3

Story: components-promo-card-v1-variations--ratio-4-to-3 · tags: components

Variation that uses the attributes header-headline, "header-overline", footer-headline, and footer-text with a 4:3 aspect ratio image.

Args: header-headline=Main headline, header-overline=Overline, footer-headline=Footer headline, footer-text=Footer text, primaryActionSlot=<a href="#" aria-label="placeholder promo card" slot="primary-action"></a>, defaultSlot=(see snippet), tagsSlot=(see snippet), elevation-level=stacked, headerLogoSlot=(see snippet)

<oc-promo-card-v1 header-headline="Main headline" header-overline="Overline" footer-headline="Footer headline" footer-text="Footer text" elevation-level="stacked">
  <a href="#" aria-label="placeholder promo card" slot="primary-action"></a>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
        <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
        <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
  <img slot="header-logo" src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png" alt="Placeholder logo" />
  <picture
          ><source
            srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
            media="(min-width: 48em)"
            type="image/webp" />
          <source
            srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
            media="(min-width: 48em)" />
          <img
            src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
            alt="placeholder image"
        /></picture>
</oc-promo-card-v1>

Ratio 8:3

Story: components-promo-card-v1-variations--ratio-8-to-3 · tags: components

Variation that uses the attributes header-headline, "header-overline", footer-headline, footer-text, tags, and logo with a 8:3 aspect ratio image.

Args: header-headline=Main headline, header-overline=Overline, footer-headline=Footer headline, footer-text=Footer text, primaryActionSlot=<a href="#" aria-label="placeholder promo card" slot="primary-action"></a>, defaultSlot=(see snippet), tagsSlot=(see snippet), headerLogoSlot=(see snippet)

<oc-promo-card-v1 header-headline="Main headline" header-overline="Overline" footer-headline="Footer headline" footer-text="Footer text">
  <a href="#" aria-label="placeholder promo card" slot="primary-action"></a>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
        <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
        <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
  <img slot="header-logo" src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png" alt="Placeholder logo" />
  <picture
          ><source
            srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
            media="(min-width: 48em)"
            type="image/webp" />
          <source
            srcset="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
            media="(min-width: 48em)" />
          <img
            src="https://www.otto.de/assets-storybook/assets/img-placeholder-100.DVwSxVZf.png"
            alt="placeholder image"
        /></picture>
</oc-promo-card-v1>

Demo: Long texts and broad logo

Story: components-promo-card-v1-variations--demo-long-texts-and-broad-logo · tags: components

Variation that uses the attributes header-headline, "header-overline", footer-headline, footer-text, tags, and logo with a 16:9 aspect ratio image.

<oc-promo-card-v1
  id="my-promo-card-1"
  footer-headline="Footer headline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
  footer-text="Footer text – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
  header-headline="Main headline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
  header-overline="Overline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
>
  <a
    href="#"
    aria-owns="my-promo-card-1"
    aria-labelledby="my-promo-card-1"
    slot="primary-action"
  ></a>
  <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
  <picture>
    <source srcset="${placeholderImage}" media="(min-width: 48em)" type="image/webp" />
    <source srcset="${placeholderImage}" media="(min-width: 48em)" />
    <img src="${placeholderImage}" alt="placeholder image" />
  </picture>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale" show-info-icon>-12%</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale" show-info-icon
    >-20% Extra
  </oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
  <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
</oc-promo-card-v1>

{
  name: "Demo: Long texts and broad logo",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html` <oc-promo-card-v1
      id="my-promo-card-1"
      footer-headline="Footer headline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
      footer-text="Footer text – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      header-headline="Main headline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
      header-overline="Overline – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
    >
      <a
        href="#"
        aria-owns="my-promo-card-1"
        aria-labelledby="my-promo-card-1"
        slot="primary-action"
      ></a>
      <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
      <picture>
        <source srcset="${placeholderImage}" media="(min-width: 48em)" type="image/webp" />
        <source srcset="${placeholderImage}" media="(min-width: 48em)" />
        <img src="${placeholderImage}" alt="placeholder image" />
      </picture>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale" show-info-icon>-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale" show-info-icon
        >-20% Extra
      </oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label</oc-tag-v1>
    </oc-promo-card-v1>`;
  }
}

Demo: Multiple Promo Cards

Story: components-promo-card-v1-variations--demo-multiple-promo-cards · tags: components

Variation that uses the attributes header-headline, "header-overline", footer-headline, footer-text, and href, tags, and logo with a 16:9 aspect ratio image.

<div style="display: flex; gap: 16px;">
  <oc-promo-card-v1
    id="my-promo-card-1"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
    style="flex: 1"
  >
    <a
      href="#"
      aria-owns="my-promo-card-1"
      aria-labelledby="my-promo-card-1"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>
  <oc-promo-card-v1
    id="my-promo-card-2"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit"
    style="flex: 1"
  >
    <a
      href="#"
      aria-owns="my-promo-card-2"
      aria-labelledby="my-promo-card-2"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
  </oc-promo-card-v1>
  <oc-promo-card-v1
    id="my-promo-card-3"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit."
    style="flex: 1"
  >
    <a
      href="#"
      aria-owns="my-promo-card-3"
      aria-labelledby="my-promo-card-3"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>
</div>

{
  name: "Demo: Multiple Promo Cards",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <div style="display: flex; gap: 16px;">
        <oc-promo-card-v1
          id="my-promo-card-1"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
          style="flex: 1"
        >
          <a
            href="#"
            aria-owns="my-promo-card-1"
            aria-labelledby="my-promo-card-1"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>
        <oc-promo-card-v1
          id="my-promo-card-2"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit"
          style="flex: 1"
        >
          <a
            href="#"
            aria-owns="my-promo-card-2"
            aria-labelledby="my-promo-card-2"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
        </oc-promo-card-v1>
        <oc-promo-card-v1
          id="my-promo-card-3"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit."
          style="flex: 1"
        >
          <a
            href="#"
            aria-owns="my-promo-card-3"
            aria-labelledby="my-promo-card-3"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>
      </div>
    `;
  }
}

Demo: Multiple Promo Cards with Action Signifier

Story: components-promo-card-v1-variations--demo-multiple-promo-cards-with-action-signifier · tags: components

Variation that uses action signifiers in the header and footer

<div style="display: flex; gap: 16px;">
  <oc-promo-card-v1
    id="my-promo-card-1"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
    style="flex: 1"
  >
    <a
      href="#"
      aria-owns="my-promo-card-1"
      aria-labelledby="my-promo-card-1"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <oc-action-signifier-v1
      slot="action-signifier-header"
      variant="icon"
    ></oc-action-signifier-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>
  <oc-promo-card-v1
    id="my-promo-card-2"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit"
    style="flex: 1"
  >
    <a
      href="#"
      aria-owns="my-promo-card-2"
      aria-labelledby="my-promo-card-2"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <oc-action-signifier-v1
      slot="action-signifier-header"
      variant="text"
      label="Action"
    ></oc-action-signifier-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
  </oc-promo-card-v1>
  <oc-promo-card-v1
    id="my-promo-card-3"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit."
    style="flex: 1"
  >
    <a
      href="#"
      aria-owns="my-promo-card-3"
      aria-labelledby="my-promo-card-3"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
    <oc-action-signifier-v1
      slot="action-signifier-footer"
      variant="icon"
    ></oc-action-signifier-v1>
  </oc-promo-card-v1>
  <oc-promo-card-v1
    id="my-promo-card-4"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit."
    style="flex: 1"
  >
    <a
      href="#"
      aria-owns="my-promo-card-4"
      aria-labelledby="my-promo-card-4"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
    <oc-action-signifier-v1
      slot="action-signifier-footer"
      variant="text"
      label="Action"
    ></oc-action-signifier-v1>
  </oc-promo-card-v1>
</div>

{
  name: "Demo: Multiple Promo Cards with Action Signifier",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <div style="display: flex; gap: 16px;">
        <oc-promo-card-v1
          id="my-promo-card-1"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
          style="flex: 1"
        >
          <a
            href="#"
            aria-owns="my-promo-card-1"
            aria-labelledby="my-promo-card-1"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <oc-action-signifier-v1
            slot="action-signifier-header"
            variant="icon"
          ></oc-action-signifier-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>
        <oc-promo-card-v1
          id="my-promo-card-2"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit"
          style="flex: 1"
        >
          <a
            href="#"
            aria-owns="my-promo-card-2"
            aria-labelledby="my-promo-card-2"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <oc-action-signifier-v1
            slot="action-signifier-header"
            variant="text"
            label="Action"
          ></oc-action-signifier-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
        </oc-promo-card-v1>
        <oc-promo-card-v1
          id="my-promo-card-3"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit."
          style="flex: 1"
        >
          <a
            href="#"
            aria-owns="my-promo-card-3"
            aria-labelledby="my-promo-card-3"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
          <oc-action-signifier-v1
            slot="action-signifier-footer"
            variant="icon"
          ></oc-action-signifier-v1>
        </oc-promo-card-v1>
        <oc-promo-card-v1
          id="my-promo-card-4"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit."
          style="flex: 1"
        >
          <a
            href="#"
            aria-owns="my-promo-card-4"
            aria-labelledby="my-promo-card-4"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
          <oc-action-signifier-v1
            slot="action-signifier-footer"
            variant="text"
            label="Action"
          ></oc-action-signifier-v1>
        </oc-promo-card-v1>
      </div>
    `;
  }
}

Demo: Multiple Promo Cards with elevation

Story: components-promo-card-v1-variations--demo-multiple-promo-cards-with-elevation · tags: components

Variation that uses the attributes header-headline, header-overline, footer-headline, footer-text, and href, tags, and logo with a 16:9 aspect ratio image. Also uses the new elevation-level property.

<div style="display: flex; gap: 16px;">
  <oc-promo-card-v1
    id="my-promo-card-1"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
    style="flex: 1"
    elevation-level="canvas"
  >
    <a
      href="#"
      aria-owns="my-promo-card-1"
      aria-labelledby="my-promo-card-1"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>

  <div style="flex: 1; background-color: #fff; padding: 16px">
    <oc-promo-card-v1
      id="my-promo-card-2"
      header-headline="Main headline"
      header-overline="Overline"
      footer-headline="Footer headline"
      footer-text="Lorem ipsum dolor sit"
      style="flex: 1"
      elevation-level="stacked"
    >
      <a
        href="#"
        aria-owns="my-promo-card-2"
        aria-labelledby="my-promo-card-2"
        slot="primary-action"
      ></a>
      <img src="${placeholderImage}" alt="placeholder image" />
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
      <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
    </oc-promo-card-v1>
  </div>
  <oc-promo-card-v1
    id="my-promo-card-3"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit."
    style="flex: 1"
    elevation-level="above"
  >
    <a
      href="#"
      aria-owns="my-promo-card-3"
      aria-labelledby="my-promo-card-3"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>
  <oc-promo-card-v1
    id="my-promo-card-4"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit."
    style="flex: 1"
    elevation-level="sticky"
  >
    <a
      href="#"
      aria-owns="my-promo-card-4"
      aria-labelledby="my-promo-card-4"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>
</div>

{
  name: "Demo: Multiple Promo Cards with elevation",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <div style="display: flex; gap: 16px;">
        <oc-promo-card-v1
          id="my-promo-card-1"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
          style="flex: 1"
          elevation-level="canvas"
        >
          <a
            href="#"
            aria-owns="my-promo-card-1"
            aria-labelledby="my-promo-card-1"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>

        <div style="flex: 1; background-color: #fff; padding: 16px">
          <oc-promo-card-v1
            id="my-promo-card-2"
            header-headline="Main headline"
            header-overline="Overline"
            footer-headline="Footer headline"
            footer-text="Lorem ipsum dolor sit"
            style="flex: 1"
            elevation-level="stacked"
          >
            <a
              href="#"
              aria-owns="my-promo-card-2"
              aria-labelledby="my-promo-card-2"
              slot="primary-action"
            ></a>
            <img src="${placeholderImage}" alt="placeholder image" />
            <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
            <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra </oc-tag-v1>
          </oc-promo-card-v1>
        </div>
        <oc-promo-card-v1
          id="my-promo-card-3"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit."
          style="flex: 1"
          elevation-level="above"
        >
          <a
            href="#"
            aria-owns="my-promo-card-3"
            aria-labelledby="my-promo-card-3"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>
        <oc-promo-card-v1
          id="my-promo-card-4"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit."
          style="flex: 1"
          elevation-level="sticky"
        >
          <a
            href="#"
            aria-owns="my-promo-card-4"
            aria-labelledby="my-promo-card-4"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>
      </div>
    `;
  }
}

Demo: Background color

Story: components-promo-card-v1-variations--demo-background-color · tags: components

Demo: Multiple Promocards with different background colors

Args: inverted=true

<div style="display: flex; gap: 16px; flex-wrap: wrap">
  <oc-promo-card-v1
    id="my-promo-card-1"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
    style="flex: 0 0 240px"
    elevation-level="canvas"
    inverted="true"
  >
    <a
      href="#"
      aria-owns="my-promo-card-1"
      aria-labelledby="my-promo-card-1"
      slot="primary-action"
    ></a>
    <img
      src="https://i.otto.de/i/otto/4acf54bf-6fd2-5b57-89d2-a6a91778a95d?$teat_product_ddt_xl$&fmt=webp"
      alt="placeholder image"
    />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale" show-info-icon
      >-12%</oc-tag-v1
    >
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale" show-info-icon
      >-20% Extra</oc-tag-v1
    >
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary" show-info-icon
      >Label
    </oc-tag-v1>
  </oc-promo-card-v1>

  <oc-promo-card-v1
    id="my-promo-card-2"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
    style="flex: 0 0 240px; --background-color: #1E5A78"
    elevation-level="canvas"
    inverted="true"
  >
    <a
      href="#"
      aria-owns="my-promo-card-2"
      aria-labelledby="my-promo-card-2"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>

  <oc-promo-card-v1
    id="my-promo-card-3"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
    style="flex: 0 0 240px; --background-color: #5E8114"
    elevation-level="canvas"
    inverted="true"
  >
    <a
      href="#"
      aria-owns="my-promo-card-3"
      aria-labelledby="my-promo-card-3"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>

  <oc-promo-card-v1
    id="my-promo-card-4"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
    style="flex: 0 0 240px; --background-color: #6C49CF"
    elevation-level="canvas"
    inverted="true"
  >
    <a
      href="#"
      aria-owns="my-promo-card-4"
      aria-labelledby="my-promo-card-4"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>

  <oc-promo-card-v1
    id="my-promo-card-5"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
    style="flex: 0 0 240px; --background-color: #801489"
    elevation-level="canvas"
    inverted="true"
  >
    <a
      href="#"
      aria-owns="my-promo-card-5"
      aria-labelledby="my-promo-card-5"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>

  <oc-promo-card-v1
    id="my-promo-card-6"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
    style="flex: 0 0 240px; --background-color: #8C2D4B"
    elevation-level="canvas"
    inverted="true"
  >
    <a
      href="#"
      aria-owns="my-promo-card-6"
      aria-labelledby="my-promo-card-6"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>

  <oc-promo-card-v1
    id="my-promo-card-7"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
    style="flex: 0 0 240px; --background-color: #E95D21"
    elevation-level="canvas"
    inverted="true"
  >
    <a
      href="#"
      aria-owns="my-promo-card-7"
      aria-labelledby="my-promo-card-7"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>

  <oc-promo-card-v1
    id="my-promo-card-8"
    header-headline="Main headline"
    header-overline="Overline"
    footer-headline="Footer headline"
    footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
    style="flex: 0 0 240px; --background-color: #9E790D"
    elevation-level="canvas"
    inverted="true"
  >
    <a
      href="#"
      aria-owns="my-promo-card-8"
      aria-labelledby="my-promo-card-8"
      slot="primary-action"
    ></a>
    <img src="${placeholderImage}" alt="placeholder image" />
    <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
    <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
  </oc-promo-card-v1>
</div>

{
  name: "Demo: Background color",
  parameters: {
    controls: {
      disabled: true
    }
  },
  args: {
    inverted: true
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <div style="display: flex; gap: 16px; flex-wrap: wrap">
        <oc-promo-card-v1
          id="my-promo-card-1"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
          style="flex: 0 0 240px"
          elevation-level="canvas"
          inverted="true"
        >
          <a
            href="#"
            aria-owns="my-promo-card-1"
            aria-labelledby="my-promo-card-1"
            slot="primary-action"
          ></a>
          <img
            src="https://i.otto.de/i/otto/4acf54bf-6fd2-5b57-89d2-a6a91778a95d?$teat_product_ddt_xl$&fmt=webp"
            alt="placeholder image"
          />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale" show-info-icon
            >-12%</oc-tag-v1
          >
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale" show-info-icon
            >-20% Extra</oc-tag-v1
          >
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary" show-info-icon
            >Label
          </oc-tag-v1>
        </oc-promo-card-v1>

        <oc-promo-card-v1
          id="my-promo-card-2"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
          style="flex: 0 0 240px; --background-color: #1E5A78"
          elevation-level="canvas"
          inverted="true"
        >
          <a
            href="#"
            aria-owns="my-promo-card-2"
            aria-labelledby="my-promo-card-2"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>

        <oc-promo-card-v1
          id="my-promo-card-3"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
          style="flex: 0 0 240px; --background-color: #5E8114"
          elevation-level="canvas"
          inverted="true"
        >
          <a
            href="#"
            aria-owns="my-promo-card-3"
            aria-labelledby="my-promo-card-3"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>

        <oc-promo-card-v1
          id="my-promo-card-4"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
          style="flex: 0 0 240px; --background-color: #6C49CF"
          elevation-level="canvas"
          inverted="true"
        >
          <a
            href="#"
            aria-owns="my-promo-card-4"
            aria-labelledby="my-promo-card-4"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>

        <oc-promo-card-v1
          id="my-promo-card-5"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
          style="flex: 0 0 240px; --background-color: #801489"
          elevation-level="canvas"
          inverted="true"
        >
          <a
            href="#"
            aria-owns="my-promo-card-5"
            aria-labelledby="my-promo-card-5"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>

        <oc-promo-card-v1
          id="my-promo-card-6"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
          style="flex: 0 0 240px; --background-color: #8C2D4B"
          elevation-level="canvas"
          inverted="true"
        >
          <a
            href="#"
            aria-owns="my-promo-card-6"
            aria-labelledby="my-promo-card-6"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>

        <oc-promo-card-v1
          id="my-promo-card-7"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
          style="flex: 0 0 240px; --background-color: #E95D21"
          elevation-level="canvas"
          inverted="true"
        >
          <a
            href="#"
            aria-owns="my-promo-card-7"
            aria-labelledby="my-promo-card-7"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>

        <oc-promo-card-v1
          id="my-promo-card-8"
          header-headline="Main headline"
          header-overline="Overline"
          footer-headline="Footer headline"
          footer-text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy"
          style="flex: 0 0 240px; --background-color: #9E790D"
          elevation-level="canvas"
          inverted="true"
        >
          <a
            href="#"
            aria-owns="my-promo-card-8"
            aria-labelledby="my-promo-card-8"
            slot="primary-action"
          ></a>
          <img src="${placeholderImage}" alt="placeholder image" />
          <img slot="header-logo" src="${placeholderImage}" alt="Placeholder logo" />
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-12%</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="sale">-20% Extra</oc-tag-v1>
          <oc-tag-v1 slot="tags" size="50" size-l="100" variant="info-primary">Label </oc-tag-v1>
        </oc-promo-card-v1>
      </div>
    `;
  }
}