<div class="product-list-teaser">
    <div class="product-list-teaser__body">
        <div class="product-list-teaser__caption">Das Auf-Herz-und-Nieren-Modul</div>
        <h2 class="product-list-teaser__headline">Vision Day</h2>
        <p class="product-list-teaser__text">Ihre Idee steht noch ganz am Anfang? In einem gemeinsamen Workshop nach
            dem LeanCanvas- Prinzip gehen wir den notwendigen nächsten Schritt. Gemeinsam
            mit Ihnen und Ihrem Team stellen wir Ihre Idee auf den Prüfstand und erarbeiten
            Geschäftsziele, Zielgruppen und Produktvorteile.</p>
    </div>
    <div class="product-list-teaser__footer">
        <ul class="tuple-list">
            <li class="tuple-list__entry"><span class="tuple-list__label">Dauer:</span><span class="tuple-list__value">1 Tag</span>
            </li>
            <li class="tuple-list__entry"><span class="tuple-list__label">Teilnehmer:</span><span class="tuple-list__value">Management, Product Owner, Digital Product Designer</span>
            </li>
            <li class="tuple-list__entry"><span class="tuple-list__label">Ergebnis:</span><span class="tuple-list__value">Eine konkrete Produktvision und ein Vorschlag zu umsetzbaren nächsten Schritten.</span>
            </li>
        </ul>
    </div><a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
</div>
<div class="product-list-teaser">
    <div class="product-list-teaser__body">
        <div class="product-list-teaser__caption">Das Auf-Herz-und-Nieren-Modul</div>
        <h2 class="product-list-teaser__headline">Vision Day</h2>
        <p class="product-list-teaser__text">
            Ihre Idee steht noch ganz am Anfang? In einem gemeinsamen Workshop nach dem LeanCanvas- Prinzip gehen wir
            den notwendigen nächsten Schritt. Gemeinsam mit Ihnen und Ihrem Team stellen wir Ihre Idee auf den Prüfstand
            und erarbeiten Geschäftsziele, Zielgruppen und Produktvorteile.
        </p>
    </div>
    <div class="product-list-teaser__footer">
        <ul class="tuple-list">
            <li class="tuple-list__entry"><span class="tuple-list__label">Dauer:</span><span class="tuple-list__value">1
                    Tag</span></li>
            <li class="tuple-list__entry"><span class="tuple-list__label">Teilnehmer:</span><span
                    class="tuple-list__value">Management,
                    Product Owner, Digital Product Designer</span></li>
            <li class="tuple-list__entry"><span class="tuple-list__label">Ergebnis:</span><span
                    class="tuple-list__value">Eine
                    konkrete Produktvision und ein Vorschlag zu umsetzbaren nächsten Schritten.</span></li>
        </ul>
    </div>
    <a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
</div>
/* No context defined for this component. */
  • Content:
    .product-list-teaser {
      @extend %block-link;
    
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: $container-spacer-y;
      background-color: $list-teaser-product-background-color;
    }
    
    .product-list-teaser__body {
      margin-bottom: $container-spacer-y;
      border-bottom: 1px solid $list-teaser-product-border-color-muted;
      padding: $container-spacer-y $container-spacer-x 0;
    }
    
    .product-list-teaser__footer {
      padding: 0 $container-spacer-y $container-spacer-x;
    
      .tuple-list {
        margin-bottom: 0;
      }
    }
    
    .product-list-teaser__cta {
      @extend %block-link;
      @extend %heading-font-heavy;
      background: $list-teaser-product-background-color-cta;
      padding: $spacer-xxs;
      text-align: center;
      line-height: $base-line-height;
      color: $brand-white;
      font-size: $link-teaser-font-size;
    }
    
    .product-list-teaser__caption {
      @extend %teaser-caption;
      margin-bottom: $spacer-sm;
      height: $spacer-md;
    }
    
    .product-list-teaser__headline {
      margin-bottom: $spacer-sm;
      color: $list-teaser-headline-color;
    }
    
    .product-list-teaser__text {
      @extend %body-font-italic;
      margin-bottom: $spacer-base;
      line-height: $paragraph-lead-line-height-small;
      font-size: $paragraph-lead-font-size-small;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .product-list-teaser__text {
        line-height: $teaser-text-line-height-italic;
        font-size: $teaser-text-font-size-italic;
      }
    }
    
  • URL: /components/raw/product-list-teaser/_product-list-teaser.scss
  • Filesystem Path: components/02-molecules/visual-elements/teaser/list-teaser/product-list-teaser/_product-list-teaser.scss
  • Size: 1.4 KB
  • Handle: @product-list-teaser
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/teaser/list-teaser/product-list-teaser/product-list-teaser.html

There are no notes for this item.