<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. */
  • Content:
    .product-list-teaser {
      @extend %block-link;
    
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: $spacer-base;
      background-color: $list-teaser-product-background-color;
    }
    
    .product-list-teaser__body {
      padding: $spacer-base $spacer-base 0;
      border-bottom: 1px solid $list-teaser-product-border-color-muted;
      margin-bottom: $spacer-base;
    }
    
    .product-list-teaser__footer {
      padding: 0 $spacer-base $spacer-base;
    
      .tuple-list {
        margin-bottom: 0;
      }
    }
    
    .product-list-teaser__cta {
      @extend %block-link;
      @extend %heading-font-heavy;
    
      padding: $spacer-xs;
      background: $list-teaser-product-background-color-cta;
      color: $list-teaser-product-color-cta;
      font-size: $font-size-xs;
      text-align: center;
    }
    
    .product-list-teaser__caption {
      @extend %teaser-caption;
    
      height: $spacer-md;
      margin-bottom: $spacer-sm;
      color: $list-teaser-product-caption-color;
    }
    
    .product-list-teaser__headline {
      margin-bottom: $spacer-sm;
      color: $list-teaser-product-headline-color;
    }
    
    .product-list-teaser__text {
      @extend %body-font-italic;
    
      font-size: $font-size-sm;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .product-list-teaser__text {
        font-size: $font-size-md;
      }
    }
    
  • URL: /components/raw/product-list-teaser/_product-list-teaser.scss
  • Filesystem Path: components/04-molecules/visual-elements/teaser/list-teaser/product-list-teaser/_product-list-teaser.scss
  • Size: 1.2 KB
  • Handle: @product-list-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/teaser/list-teaser/product-list-teaser/product-list-teaser.html

No notes defined.