Simple Tile Teaser 

<div class="tile-grid-sm">
    <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 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="tile-grid-sm">
    <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 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 {
    flex-basis: 100%;
    flex-grow: 1;
    align-content: center;

    min-height: 20vh;
    margin-bottom: $spacer-sm;
    padding: $spacer-sm $spacer-sm $spacer-md;

    text-align: center;

    background-color: $simple-teaser-bg;
  }

  &__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;
    }
  }
}
  • URL: /components/raw/simple-tile-teaser/_simple-tile-teaser.scss
  • Filesystem Path: components/04-molecules/teaser/tile-teaser/simple-tile-teaser/_simple-tile-teaser.scss
  • Size: 794 Bytes
  • Handle: @simple-tile-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/teaser/tile-teaser/simple-tile-teaser/simple-tile-teaser.html

No notes defined.