# Simple Tile Teaser

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/teaser/tile-teaser/simple-tile-teaser/simple-tile-teaser.html

No notes defined.