Topic List Teaser

Ready

HTML
View
Context
Assets
Info
Notes


        
        <a href="#" class="topic-teaser bg-image-edition-07">
    <div class="topic-teaser__body">
        <div class="topic-teaser__caption">Schwerpunktthema</div>
        <h2 class="topic-teaser__header">Themenschwerpunkt Headline</h2>
        <div class="topic-teaser__text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
        </div>
        <div class="topic-teaser__cta">
            <span>Zum Schwerpunktthema</span>
            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
        </div>
    </div>
</a>

<a href="#" class="topic-teaser bg-image-edition-14">
    <div class="topic-teaser__body">
        <div class="topic-teaser__caption">Schwerpunktthema</div>
        <h2 class="topic-teaser__header">Themenschwerpunkt Headline</h2>
        <div class="topic-teaser__text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
        </div>
        <div class="topic-teaser__cta">Zum Schwerpunktthema
            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
        </div>
    </div>
</a>

<a href="#" class="topic-teaser bg-image-edition-04">
    <div class="topic-teaser__body">
        <div class="topic-teaser__caption">Schwerpunktthema</div>
        <h2 class="topic-teaser__header">Themenschwerpunkt Headline</h2>
        <div class="topic-teaser__text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
        </div>
        <div class="topic-teaser__cta">Zum Schwerpunktthema
            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
        </div>
    </div>
</a>

<a href="#" class="topic-teaser bg-image-edition-17">
    <div class="topic-teaser__body">
        <div class="topic-teaser__caption">Schwerpunktthema</div>
        <h2 class="topic-teaser__header">Themenschwerpunkt Headline</h2>
        <div class="topic-teaser__text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
        </div>
        <div class="topic-teaser__cta">Zum Schwerpunktthema
            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
        </div>
    </div>
</a>

<a href="#" class="topic-teaser bg-image-edition-12">
    <div class="topic-teaser__body">
        <div class="topic-teaser__caption">Schwerpunktthema</div>
        <h2 class="topic-teaser__header">Themenschwerpunkt Headline</h2>
        <div class="topic-teaser__text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
        </div>
        <div class="topic-teaser__cta">Zum Schwerpunktthema
            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
        </div>
    </div>
</a>


        <a href="#" class="topic-teaser bg-image-edition-07">
    <div class="topic-teaser__body">
        <div class="topic-teaser__caption">Schwerpunktthema</div>
        <h2 class="topic-teaser__header">Themenschwerpunkt Headline</h2>
        <div class="topic-teaser__text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
        </div>
        <div class="topic-teaser__cta">
            <span>Zum Schwerpunktthema</span>
            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
        </div>
    </div>
</a>


<a href="#" class="topic-teaser bg-image-edition-14">
    <div class="topic-teaser__body">
        <div class="topic-teaser__caption">Schwerpunktthema</div>
        <h2 class="topic-teaser__header">Themenschwerpunkt Headline</h2>
        <div class="topic-teaser__text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
        </div>
        <div class="topic-teaser__cta">Zum Schwerpunktthema
            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
        </div>
    </div>
</a>

<a href="#" class="topic-teaser bg-image-edition-04">
    <div class="topic-teaser__body">
        <div class="topic-teaser__caption">Schwerpunktthema</div>
        <h2 class="topic-teaser__header">Themenschwerpunkt Headline</h2>
        <div class="topic-teaser__text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
        </div>
        <div class="topic-teaser__cta">Zum Schwerpunktthema
            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
        </div>
    </div>
</a>

<a href="#" class="topic-teaser bg-image-edition-17">
    <div class="topic-teaser__body">
        <div class="topic-teaser__caption">Schwerpunktthema</div>
        <h2 class="topic-teaser__header">Themenschwerpunkt Headline</h2>
        <div class="topic-teaser__text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
        </div>
        <div class="topic-teaser__cta">Zum Schwerpunktthema
            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
        </div>
    </div>
</a>

<a href="#" class="topic-teaser bg-image-edition-12">
    <div class="topic-teaser__body">
        <div class="topic-teaser__caption">Schwerpunktthema</div>
        <h2 class="topic-teaser__header">Themenschwerpunkt Headline</h2>
        <div class="topic-teaser__text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
        </div>
        <div class="topic-teaser__cta">Zum Schwerpunktthema
            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
        </div>
    </div>
</a>


        
            
            /* No context defined. */

File:

Content:


                                $topic-teaser-height: ms(36);

.topic-teaser {
  @extend %block-link;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: $topic-teaser-height;
  padding: $spacer-md;

  color: $topic-teaser-body-color;
  text-align: center;

  background-repeat: no-repeat;
  background-position: top left;
  background-size: cover;
}

a.topic-teaser {
  @extend %hover-glow;
}

.topic-teaser__body {
  width: 100%;
}

.topic-teaser__text {
  @extend %teaser-text-italic;

  margin-bottom: $spacer-base;
  font-size: $font-size-base;
}

.topic-teaser__header {
  @extend %link-unstyled;
  @extend %h2;

  margin-bottom: $spacer-md;
  font-size: $font-size-xl;
  color: $topic-teaser-title-color;
}

.topic-teaser__caption {
  @extend %teaser-caption;

  height: $spacer-md;
  margin-bottom: $spacer-lg;
}

.topic-teaser__cta {
  @extend %heading-font-bold;

  display: flex;
  flex-direction: column;

  .icon {
    margin-top: $spacer-md;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .topic-teaser__header {
    margin-bottom: $spacer-base;
    font-size: $font-size-2xl;
  }

  .topic-teaser__text {
    font-size: $font-size-md;
  }

  .topic-teaser__cta {
    @extend %heading-font-bold;

    flex-direction: row;
    justify-content: center;

    .icon {
      margin-top: 0;
      margin-left: $spacer-xs;
    }
  }
}

@media screen and (min-width: $grid-breakpoint-lg) {
  .topic-teaser__body {
    width: 50%;
  }
}

URL: /components/raw/topic-list-teaser/_topic-list-teaser.scss
Filesystem Path: components/04-molecules/teaser/list-teaser/topic-list-teaser/_topic-list-teaser.scss
Size: 1.5 KB

Handle: @topic-list-teaser
Preview:
- With layout
- Component only
Filesystem Path: components/04-molecules/teaser/list-teaser/topic-list-teaser/topic-list-teaser.html

No notes defined.