<!-- Image -->
<div class="tool-banner">
    <div class="tool-banner__image">
        <picture>
            <source srcset="/images/dummy/tool-banner-01--wide.jpg" media="(min-width: 640px)" /><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/tool-banner-01.jpg" />
        </picture>
    </div>
    <div class="tool-banner__inner">
        <div class="tool-banner__headline">
            <h3 class="headline headline--display-2">Von zu Hause aus Sport machen? Einfach unsere eCoaches nutzen…
            </h3>
        </div>
        <div class="tool-banner__button">
            <a class="button button--blue" id="button-d3d5" href="#">
                <svg class="icon button__icon icon--external-link" id="icon-b9ef" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>eCoaches
            </a>
        </div>
    </div>
</div>

<!-- Icon -->
<div class="tool-banner">
    <div class="tool-banner__inner">
        <div class="tool-banner__headline">
            <h3 class="headline headline--display-2">Hier steht eine Überschrift und ich funktioniere auch mit Icon
            </h3>
        </div>
        <div class="tool-banner__button">
            <a class="button button--blue" id="button-4e8b" href="#">
                <svg class="icon button__icon icon--external-link" id="icon-342b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>Link zum externen Service
            </a>
        </div>
        <div class="tool-banner__icon">
            <svg class="icon icon--form" id="icon-64e7" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-form"></use>
</svg>
        </div>
    </div>
</div>

<!-- Form -->
<div class="tool-banner">
    <div class="tool-banner__image">
        <picture>
            <source srcset="/images/dummy/tool-banner-01--wide.jpg" media="(min-width: 640px)" /><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/tool-banner-01.jpg" />
        </picture>
    </div>
    <div class="tool-banner__inner">
        <div class="tool-banner__form">
            <form class="form form--inline">
                <div class="form__inner">
                    <div class="form-group">
                        <label class="label" for="gross-income"></label>
                        <div class="form-group__inner">
                            <input class="input input--text" type="text" placeholder="Suchbegriff eingeben" required="required" id="gross-income" name="gross-income" />
                        </div>
                    </div>
                    <div class="form__submit">
                        <input class="button button--blue" type="submit" value="Finden" />
                    </div>
                </div>
            </form>
            <a class="icon-block" href="#">
                <svg class="icon icon-block__icon icon--internal-link" id="icon-12e8" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Zur Startseite
            </a>
        </div>
    </div>
</div>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render button box
.tool-banner&attributes(attr)
  //- Background image
  if image
    .tool-banner__image
      picture
        source(srcset=image.srcWide, media='(min-width: 640px)')
        != include('@image', { image: image.src })

  .tool-banner__inner
    //- Headline
    if headline
      .tool-banner__headline
        != include('@headline--display-2', {text: headline, level: 3})

    //- Button
    if button
      .tool-banner__button
        != include('@button', {inactive, modifier: 'blue', link: button.link, text: button.title, icon: button.icon})

    //- Icon
    if icon
      .tool-banner__icon
        != include('@icon', {icon: icon})

    //- Form
    if form
      .tool-banner__form
        != include(`@form--${form}`)
        != include('@icon-block--internal-link', {text: 'Zur Startseite'})
/* Image */
{
  "headline": "Von zu Hause aus Sport machen? Einfach unsere eCoaches nutzen…",
  "image": {
    "src": "/images/dummy/tool-banner-01.jpg",
    "srcWide": "/images/dummy/tool-banner-01--wide.jpg"
  },
  "button": {
    "link": "#",
    "icon": "external-link",
    "title": "eCoaches"
  }
}

/* Icon */
{
  "headline": "Hier steht eine Überschrift und ich funktioniere auch mit Icon",
  "icon": "form",
  "button": {
    "link": "#",
    "icon": "external-link",
    "title": "Link zum externen Service"
  }
}

/* Form */
{
  "image": {
    "src": "/images/dummy/tool-banner-01.jpg",
    "srcWide": "/images/dummy/tool-banner-01--wide.jpg"
  },
  "form": "inline-2"
}

  • Content:
    $tool-banner-background-tint: rgba(227, 233, 236, 0.66);
    $tool-banner-breakpoint: 640px;
    $tool-banner-paddings: (
      s: 3rem,
      m: 3rem,
      l: 4rem,
      xl: 4rem
    );
    
    .tool-banner {
      background: linear-gradient($tool-banner-background-tint, $tool-banner-background-tint), $color-steelgrey;
      overflow: hidden;
      position: relative;
    
      @include mq($from: $tool-banner-breakpoint) {
        min-height: 24rem;
      }
    }
    
    .tool-banner__inner {
      margin-left: auto;
      margin-right: auto;
      position: relative;
    
      @each $breakpoint, $container-max-width in $container-max-widths {
        @include mq($from: $breakpoint) {
          max-width: $container-max-width;
          padding: map-get($tool-banner-paddings, $breakpoint);
          width: 100%;
        }
      }
    }
    
    .tool-banner__image {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    
      &::after {
        background: linear-gradient($tool-banner-background-tint, $tool-banner-background-tint);
        bottom: 0;
        content: '';
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
      }
    
      @include mq($from: $tool-banner-breakpoint) {
        min-width: 73rem;
        width: 100%;
      }
    }
    
    .tool-banner__headline {
      margin-bottom: 2rem;
    
      .headline--display-2 {
        font-size: 2.3rem;
      }
    
      @include mq($from: $tool-banner-breakpoint) {
        width: 60%;
      }
    }
    
    .tool-banner__icon {
      color: $color-blue;
      display: none;
      font-size: 11rem;
      opacity: 0.2;
      position: absolute;
      right: 8rem;
      top: 12rem;
      transform: translate(0, -50%);
      user-select: none;
    
      @include mq($from: $tool-banner-breakpoint) {
        display: block;
      }
    }
    
    .tool-banner__form {
      @include mq($from: l) {
        width: 80%;
      }
    }
    
  • URL: /components/raw/tool-banner/tool-banner.scss
  • Filesystem Path: src/components/organisms/tool-banner/tool-banner.scss
  • Size: 1.7 KB

There are no notes for this item.