Aeroporto di Bologna - Design System

Teaser 

<div class="c-teaser ">
    <div class="c-teaser__img" style="background-image: url(../../images/teaser-breakfast.jpg)" aria-hidden="true"></div>
    <div class="c-teaser__content">
        <div class="c-teaser__txt">
            <p><strong>Hai ancora 2 ore*</strong> prima dell’arrivo delle persone che attendi.</p>
            <p>Hai già pensato ad un piccolo <a href="#">regalo di benvenuto?</a></p><small>*Controlla sui tabelloni se ci sono aggiornamenti sul tuo volo.</small>
        </div>
    </div>
</div>
 
<div class="c-teaser {{ modifier }}">
  <div class="c-teaser__img" style="background-image: url({{ path bg-path }})" aria-hidden="true"></div>
  <div class="c-teaser__content">
    <div class="c-teaser__txt">
      {{{ teaser-text }}}
    </div>
  </div>
</div>
 
{
  "bg-path": "/images/teaser-breakfast.jpg",
  "teaser-text": "<p><strong>Hai ancora 2 ore*</strong> prima dell’arrivo delle persone che attendi.</p><p>Hai già pensato ad un piccolo <a href=\"#\">regalo di benvenuto?</a></p><small>*Controlla sui tabelloni se ci sono aggiornamenti sul tuo volo.</small>"
}
  • Content: 
    .c-teaser {
  background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
  margin-bottom: remify(32px);
  position: relative;
  overflow: hidden;

  @include min-screen(bp(tablet)) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &:before {
      content: '';
      position: absolute;
      z-index: 2;
      width: 0;
      height: 0;
      top: 0;
      left: 0;
      opacity: 1;
      z-index: 2;

      background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);

      @include min-screen(bp(tablet)) {
        width: 100%;
        height: 100%;
        background: transparent url(../../images/svgs/superhero-mask-wide.svg) no-repeat right 15vw top;
        background-size: cover;
      }

    }

}

.c-teaser__img {
  width: 100%;
  min-height: remify(180px); // From 100px to 180px. Fixes #325.
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  

  @include min-screen(bp(tablet)) {
    background-position: center center;
    background-size: cover;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    right: 0;
    max-width: remify(600px);
    // max-width: remify(400px);
    // -webkit-clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
    // clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  }

}

.c-teaser__content {
  padding: remify(16px);
  position: relative;
  z-index: 3;
  
  @include min-screen(bp(tablet)) {
    padding: remify(24px) remify(48px);
    order: 1;
    flex-grow: 1;
    padding-right: 32vw;;
  }
}

.c-teaser__title {
  color: primary(night, 100);
  @include font-scale(level-3);
  font-weight: fw(bold);
  margin-bottom: remify(16px);
}

.c-teaser__logo {
  vertical-align: middle;
  margin-right: remify(16px);
  position: relative;
  top: remify(-5px);
}

.c-teaser__txt {
  color: primary(night, 100);

  p {
    @include min-screen(bp(tablet)) {
      font-size: 150%;
    }
  }

  small {
    display: block;
    margin-top: remify(32px);
  }

  a {
    color: currentColor;
  }

}

.c-teaser__cta {
  margin-top: remify(32px);
}
  • URL: /components/raw/teaser/_teaser.scss
  • Filesystem Path: src/views/02-molecules/teaser/_teaser.scss
  • Size: 2.1 KB

No notes defined.