hkk Frontend 2017

Tool-Banner: 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-a7f5" href="#">
                <svg class="icon button__icon icon--external-link" id="icon-533c" 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-48a9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-form"></use>
</svg>
        </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, 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'}})
 
{
  "headline": "Hier steht eine Überschrift und ich funktioniere auch mit Icon",
  "icon": "form",
  "button": {
    "link": "#",
    "icon": "external-link",
    "title": "Link zum externen Service"
  }
}
  • 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.