hkk Frontend 2017

Tool-Banner 

<!-- 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-c418" href="#">
                <svg class="icon button__icon icon--external-link" id="icon-edfa" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>eCoaches
            </a>
        </div>
    </div>
    <button class="copyright js-tooltip tool-banner__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-cd92" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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-8bb7" href="#">
                <svg class="icon button__icon icon--external-link" id="icon-cce8" 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-4cb3" 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-4e7b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Zur Startseite
            </a>
        </div>
    </div>
    <button class="copyright js-tooltip tool-banner__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-029b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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, copyright: false })

  .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'})
        
  //- Copyright
  if copyright
    != include('@copyright', {title: copyright, attr: {class: 'tool-banner__copyright'}})
 
/* 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"
  },
  "copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "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"
  },
  "copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "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%;
  }
}

.tool-banner__copyright {
  bottom: 0;
  position: absolute;
  right: 0;
}
  • URL: /components/raw/tool-banner/tool-banner.scss
  • Filesystem Path: src/components/organisms/tool-banner/tool-banner.scss
  • Size: 1.8 KB

There are no notes for this item.