<div class="blocks">
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
                <h6>Teaser Untertitel</h6>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
                <h6>Teaser Untertitel</h6>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
</div>
<div class="blocks">
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
                <h6>Teaser Untertitel</h6>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
                <h6>Teaser Untertitel</h6>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
                <h6>Teaser Untertitel</h6>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
</div>
<div class="blocks">
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
                <h6>Teaser Untertitel</h6>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
                <h6>Teaser Untertitel</h6>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
</div>

<div class="blocks">
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
                <h6>Teaser Untertitel</h6>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
                <h6>Teaser Untertitel</h6>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
    <div class="simple-teaser">
        <div class="simple-teaser__body">
            <a class="simple-teaser__link">
                <h5>Teaser Titel</h5>
                <h6>Teaser Untertitel</h6>
            </a>
        </div>
        <div class="simple-teaser__footer">
            <button class="btn btn--small btn--cta" data-label="Hier klicken!">
                Hier klicken!
            </button>
        </div>
    </div>
</div>
/* No context defined. */
  • Content:
    .simple-teaser {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
      padding-bottom: $spacer-base;
    
      &__body {
        min-height: 20vh;
        flex-basis: 100%;
        flex-grow: 1;
        align-content: center;
        padding: $spacer-sm $spacer-sm $spacer-md;
        margin-bottom: $spacer-sm;
        background-color: $simple-teaser-bg;
        text-align: center;
      }
    
      &__footer {
        margin-top: -2.75rem; // Magic number
      }
    
      &__link {
        @extend %link-unstyled;
    
        transition: standard-transition(color);
    
        &,
        h5,
        h6 {
          color: $simple-teaser-color;
    
          &:focus,
          &:hover {
            color: $simple-teaser-link-focus-color;
          }
        }
    
        h5 {
          margin-bottom: $spacer-sm;
        }
    
        h6 {
          @extend %body-font-italic;
        }
      }
    }
    
    //
    // Breakpoints
    //
    @media screen and (min-width: $grid-breakpoint-md) {
      .simple-teaser {
        margin-bottom: 0;
      }
    }
    
  • URL: /components/raw/simple-tile-teaser/_simple-tile-teaser.scss
  • Filesystem Path: components/04-molecules/visual-elements/teaser/tile-teaser/simple-tile-teaser/_simple-tile-teaser.scss
  • Size: 912 Bytes
  • Handle: @simple-tile-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/teaser/tile-teaser/simple-tile-teaser/simple-tile-teaser.html

No notes defined.