<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>
import SimpleTileTeaser from "./components/02-molecules/visual-elements/teaser/tile-teaser/simple-tile-teaser/index.jsx";

<div class="blocks">
    <SimpleTileTeaser title="Teaser Titel" subtitle="Teaser Untertitel" buttonText="Hier klicken!"></SimpleTileTeaser>
    <SimpleTileTeaser title="Teaser Titel" buttonText="Hier klicken!"></SimpleTileTeaser>
    <SimpleTileTeaser title="Teaser Titel" subtitle="Teaser Untertitel" buttonText="Hier klicken!"></SimpleTileTeaser>
</div>
<div class="blocks">
    <SimpleTileTeaser title="Teaser Titel" subtitle="Teaser Untertitel" buttonText="Hier klicken!"></SimpleTileTeaser>
    <SimpleTileTeaser title="Teaser Titel" subtitle="Teaser Untertitel" buttonText="Hier klicken!"></SimpleTileTeaser>
    <SimpleTileTeaser title="Teaser Titel" subtitle="Teaser Untertitel" buttonText="Hier klicken!"></SimpleTileTeaser>
</div>
/* No context defined for this component. */
  • 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;
        margin-bottom: $spacer-sm;
        background-color: $simple-teaser-bg;
        padding: $spacer-sm $spacer-sm $spacer-md;
        min-height: 20vh;
        text-align: center;
      }
    
      &__footer {
        margin-top: -$spacer-base;
      }
    
      &__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/02-molecules/visual-elements/teaser/tile-teaser/simple-tile-teaser/_simple-tile-teaser.scss
  • Size: 900 Bytes
  • Content:
    import { createElement } from 'complate-stream'
    import Button from '../../../../../01-atoms/input-elements/button/index.jsx'
    
    export default function SimpleTileTeaser ({ title, subtitle, buttonText, href, buttonHref }) {
      return <div class='simple-teaser'>
        <div class='simple-teaser__body'>
          <a href={href} class='simple-teaser__link'>
            <h5>{title}</h5>
            { subtitle ? <h6>{subtitle}</h6> : ''}
          </a>
        </div>
        <div class='simple-teaser__footer'>
          <Button href={buttonHref} size='small' cta>{buttonText}</Button>
        </div>
      </div>
    }
    
  • URL: /components/raw/simple-tile-teaser/index.jsx
  • Filesystem Path: components/02-molecules/visual-elements/teaser/tile-teaser/simple-tile-teaser/index.jsx
  • Size: 573 Bytes
  • Handle: @simple-tile-teaser
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/teaser/tile-teaser/simple-tile-teaser/simple-tile-teaser.html

There are no notes for this item.