# Static Tile Teaser

Ready

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

`

    <div class="tile-grid-md">
        <a href="#" class="static-tile-teaser static-tile-teaser-bg-color">
            <div class="static-tile-teaser__content">
                <div class="static-tile-teaser__body">
                    <h2 class="static-tile-teaser__caption">Unsere Podcasts</h2>
                    <h2 class="static-tile-teaser__headline">Dies ist eine Headline</h2>
                    <div class="static-tile-teaser__text">
                        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                        hydrocarbons car. Qui excepteur laborum ea est culpa reprehenderit
                        enim ex amet veniam excepteur. Minim aliqua amet reprehenderit id
                        velit id dolor quis et ea anim in. Cillum nisi ex incididunt id
                        adipisicing reprehenderit id dolor qui anim non velit. Laboris esse ex
                        duis sit labore culpa quis duis. Irure tempor deserunt et velit labore
                        excepteur pariatur aute adipisicing eu do cupidatat nisi. Cupidatat
                        officia aliquip excepteur Lorem in. Cillum amet enim anim do ut do
                        adipisicing excepteur proident aute.
                    </div>
                </div>
                <div class="static-tile-teaser__goto">
                    <span class="link-teaser">Alle Episoden</span>
                </div>
            </div>
        </a>
        <a href="#" class="static-tile-teaser static-tile-teaser-bg-color--security">
            <div class="static-tile-teaser__content">
                <div class="static-tile-teaser__body">
                    <h2 class="static-tile-teaser__headline">Dies ist eine Headline ohne Caption</h2>
                    <div class="static-tile-teaser__text">
                        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                        hydrocarbons car.
                    </div>
                </div>
                <div class="static-tile-teaser__goto">
                    <span class="link-teaser link-teaser--security">Alle Episoden</span>
                </div>
            </div>
        </a>
    </div>

`
`

    <div class="tile-grid-md">
        <a href="#" class="static-tile-teaser static-tile-teaser-bg-color">
            <div class="static-tile-teaser__content">
                <div class="static-tile-teaser__body">
                    <h2 class="static-tile-teaser__caption">Unsere Podcasts</h2>
                    <h2 class="static-tile-teaser__headline">Dies ist eine Headline</h2>
                    <div class="static-tile-teaser__text">
                        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                        hydrocarbons car. Qui excepteur laborum ea est culpa reprehenderit
                        enim ex amet veniam excepteur. Minim aliqua amet reprehenderit id
                        velit id dolor quis et ea anim in. Cillum nisi ex incididunt id
                        adipisicing reprehenderit id dolor qui anim non velit. Laboris esse ex
                        duis sit labore culpa quis duis. Irure tempor deserunt et velit labore
                        excepteur pariatur aute adipisicing eu do cupidatat nisi. Cupidatat
                        officia aliquip excepteur Lorem in. Cillum amet enim anim do ut do
                        adipisicing excepteur proident aute.
                    </div>
                </div>
                <div class="static-tile-teaser__goto">
                    <span class="link-teaser">Alle Episoden</span>
                </div>
            </div>
        </a>
        <a href="#" class="static-tile-teaser static-tile-teaser-bg-color--security">
            <div class="static-tile-teaser__content">
                <div class="static-tile-teaser__body">
                    <h2 class="static-tile-teaser__headline">Dies ist eine Headline ohne Caption</h2>
                    <div class="static-tile-teaser__text">
                        Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                        hydrocarbons car.
                    </div>
                </div>
                <div class="static-tile-teaser__goto">
                    <span class="link-teaser link-teaser--security">Alle Episoden</span>
                </div>
            </div>
        </a>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      $case-tile-teaser-sm-height: ms(32);

      .static-tile-teaser-bg-color {
        color: $static-tile-teaser-text-color;
        background-color: $podcast-teaser-overlay-color;
        background-position: center;

        &--security {
          color: $brand-gray;
          background-color: $podcast-teaser-overlay-color-sec;

          .static-tile-teaser__headline {
            color: $brand-gray;
          }
        }
      }

      .static-tile-teaser {
        @extend %block-link;

        display: flex;
        flex-direction: column;
        padding: $spacer-sm;
        background-size: cover;
      }

      .static-tile-teaser__content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: space-between;

        padding: $spacer-md;

        background-color: $case-tile-teaser-body-bg-color;
      }

      .static-tile-teaser__body {
        text-align: center;
      }

      .static-tile-teaser__caption {
        @extend %teaser-caption;

        margin: 0;
      }

      .static-tile-teaser__headline {
        margin: $spacer-xs 0;
      }

      .static-tile-teaser__text {
        @extend %teaser-text-italic;
      }

      .static-tile-teaser__goto {
        text-align: center;
      }

      //
      // case-tile-teaser--sm
      //
      .static-tile-teaser--sm {
        min-height: $case-tile-teaser-sm-height;
        margin-bottom: $spacer-xxl;
        padding: $spacer-md;
      }

      .static-tile-teaser__content--sm {
        position: relative;
        top: $spacer-xxl;
        justify-content: space-between;
        padding: $spacer-sm;
      }

      .static-tile-teaser__headline--sm {
        font-size: $font-size-sm;
      }

      .static-tile-teaser__text--sm {
        margin-bottom: $spacer-xs;
        font-size: $font-size-base;
      }

      //
      // Breakpoints
      //
      @media screen and (min-width: $grid-breakpoint-md) {
        .static-tile-teaser {
          padding: $spacer-md;
        }

        .static-tile-teaser__content {
          padding: $spacer-lg;
        }
      }

  `
- URL: /components/raw/static-tile-teaser/_static-tile-teaser.scss
- Filesystem Path: components/04-molecules/teaser/tile-teaser/static-tile-teaser/_static-tile-teaser.scss
- Size: 1.7 KB

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

No notes defined.