<div class="default-full-width-teaser topic-header-bg-image-girl">
    <div class="default-full-width-teaser__wrapper">
        <div class="default-full-width-teaser__body">
            <div>
                <div class="default-full-width-teaser__caption">case study</div>
                <div>
                    <div class="default-full-width-teaser__header">
                        <h1 class="punch-in topic-header-bg-image-text-box-girl">case study headline eggs</h1>
                    </div>
                    <div class="default-full-width-teaser__text">lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque
                        culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium
                        libero, quia nemo!</div>
                    <div class="default-full-width-teaser__footer"><a href="#" class="link-teaser">mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="default-full-width-teaser default-full-width-teaser--simple landing-page-header-bg-image">
    <div class="default-full-width-teaser__wrapper">
        <div class="default-full-width-teaser__body">
            <div>
                <div class="default-full-width-teaser__caption">Case Study</div>
                <div>
                    <div class="default-full-width-teaser__header">
                        <h1>Case Study Headline</h1>
                    </div>
                    <div class="default-full-width-teaser__text">lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque
                        culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium
                        libero, quia nemo!</div>
                    <div class="default-full-width-teaser__footer"><a href="#" class="btn btn--small btn--cta" data-label="mehr erfahren">mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
import DefaultFullWidthTeaser from "./components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser"

<DefaultFullWidthTeaser header="case study headline eggs" caption="case study" href="#" linkText="mehr erfahren" additionalClasses="topic-header-bg-image-girl" headerAdditionalClasses="topic-header-bg-image-text-box-girl" punchIn>
    lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
</DefaultFullWidthTeaser>

<DefaultFullWidthTeaser header="Case Study Headline" caption="Case Study" href="#" linkText="mehr erfahren"
    additionalClasses="landing-page-header-bg-image" simple withButton>
    lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
</DefaultFullWidthTeaser>
/* No context defined for this component. */
  • Content:
    $default-full-width-teaser-bg-width: 1444px; // Arbitrary value
    $default-full-width-teaser-bg-height: 1000px; // Arbitrary value
    $default-full-width-teaser-height: ms(38);
    
    .default-full-width-teaser {
      @extend %page-header;
    
      justify-content: center;
      width: 100%;
      max-width: 100%;
      min-height: $default-full-width-teaser-height;
    
      &--right-aligned {
        justify-content: flex-end;
      }
    
      &__punch-in {
        @extend %punch-in;
      }
    }
    
    .default-full-width-teaser__wrapper {
      display: flex;
      justify-content: flex-start;
      padding: $container-spacer-x-sm;
    }
    
    .default-full-width-teaser__body {
      display: flex;
      flex-basis: 100%;
      flex-direction: column;
      justify-content: space-between;
      background-color: $default-full-width-teaser-body-bg;
      padding: $spacer-base;
    }
    
    .default-full-width-teaser__text {
      @extend %teaser-text;
      margin-bottom: $spacer-base;
      line-height: $big-content-teaser-text-line-height-small;
      font-size: $big-content-teaser-text-font-size-small;
      hyphens: auto;
    }
    
    .default-full-width-teaser__header {
      padding-bottom: 0;
      color: $default-full-width-teaser-body-color;
    
      .punch-in {
        line-height: 1.31; // fix cut descender
      }
    }
    
    .default-full-width-teaser__caption {
      @extend %teaser-caption;
      margin-bottom: $spacer-xxs;
      height: $spacer-md;
    }
    
    //
    // Media Queries
    //
    
    @media screen and (max-width: $grid-breakpoint-sm) {
      .default-full-width-teaser {
        margin-bottom: $spacer-xxl;
      }
    
      .default-full-width-teaser__body {
        position: relative;
        top: $spacer-xxl;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .default-full-width-teaser__wrapper {
        padding: $spacer-base;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md-lg) {
      .default-full-width-teaser__wrapper {
        padding: $spacer-sm;
        width: $default-page-layout-width-xl;
        max-width: $default-page-layout-content-width-xl;
      }
    
      .default-full-width-teaser__text {
        line-height: $big-content-teaser-text-line-height;
        font-size: $big-content-teaser-text-font-size;
        hyphens: none;
      }
    
      // Variation without stencil Headlines
      .default-full-width-teaser--simple {
        background-position: top left;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-lg) {
      .default-full-width-teaser__body {
        flex-basis: 50%;
      }
    }
    
  • URL: /components/raw/default-full-width-teaser/_default-full-width-teaser.scss
  • Filesystem Path: components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/_default-full-width-teaser.scss
  • Size: 2.3 KB
  • Content:
    import { createElement } from 'complate-stream'
    import classNames from 'classnames'
    import Button from '../../../../../01-atoms/input-elements/button/index.jsx'
    
    export default function DefaultFullWidthTeaser ({ header, caption, href, linkText, simple, punchIn, withButton, additionalClasses, headerAdditionalClasses, align }, ...children) {
      let leftAligned = (align === 'left')
      let classname = classNames('default-full-width-teaser', { 'default-full-width-teaser--simple': simple, 'default-full-width-teaser--left-aligned': leftAligned }, additionalClasses)
      let headerClass
      if (punchIn) {
        headerClass = classNames('punch-in', headerAdditionalClasses)
      }
    
      return <div class={classname}>
        <div class='default-full-width-teaser__wrapper'>
          <div class='default-full-width-teaser__body'>
            <div>
              <div class='default-full-width-teaser__caption'>{caption}</div>
              <div>
                <div class='default-full-width-teaser__header'>
                  <h1 class={headerClass}>{header}</h1>
                </div>
                <div class='default-full-width-teaser__text'>
                  {children}
                </div>
                <div class='default-full-width-teaser__footer'>
                  { withButton ? <Button href={href} size='small' cta>{linkText}</Button>
                    : <a href={href} class='link-teaser'>{linkText}</a> }
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    }
    
  • URL: /components/raw/default-full-width-teaser/index.jsx
  • Filesystem Path: components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/index.jsx
  • Size: 1.4 KB
  • Handle: @default-full-width-teaser
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/default-full-width-teaser.html

There are no notes for this item.