Aeroporto di Bologna - Design System

Launch: Small Caption 

<div class="c-launch c-launch--smaller">

    <div class="c-launch__image">
        <img src="../../images/launch-where-to-pay.jpg" alt="Come e dove pagare" />
    </div>

    <p class="c-launch__caption">
        <a href="#">Come e dove pagare</a>
    </p>

</div>
 
<div class="c-launch {{ modifier }}">

  {{#if rounded-label}}
  {{> @rounded-label rounded-label }}
  {{/if}}

  {{#if bg-path}}
  <div class="c-launch__image">
    <img src="{{ path bg-path }}" alt="{{ caption }}" />
  </div>
  {{/if}}

  {{#if label }}
  <p class="c-launch__label" aria-hidden="true">
    {{ label }}
  </p>
  {{/if}}


  {{#if caption}}
  <p class="c-launch__caption">
    <a href="{{ url }}">{{ caption }}</a>
  </p>
  {{/if}}

</div>
 
{
  "bg-path": "/images/launch-where-to-pay.jpg",
  "label": false,
  "caption": "Come e dove pagare",
  "modifier": "c-launch--smaller",
  "url": "#"
}
  • Content: 
    .c-launch {
  padding: 0;
  position: relative;
  border-radius: remify(24px);
  overflow: hidden;
  margin-right: remify(16px);
  margin-bottom: remify(16px);
  background-color: secondary(soft, 100);

  @include shadow(small);

  &:hover {
    @include shadow(high);
    background-color: #fff;
  }

  @supports (display: grid) {
    margin-right: 0;
    margin-bottom: 0;
  }

  .c-rounded-label  {
    position: absolute;
    top: remify(8px);
    left: 50%;
    transform: translateX(-50%);
    font-size: remify(12px);
  }

  .c-launch__image {
    max-height: remify(240px);
    min-width: remify(150px); 
    overflow: hidden;

    img { width: 100%; }
  }

}


.c-launch__label,
.c-launch__caption {
  text-align: center;
}

.c-launch__label {
  	@include font-scale(level-1-5);
    color: primary(night, 60);
    padding: remify(16px) 0 0;
}

.c-launch__caption {
  @include font-scale(level-3);
  padding: 0 0 remify(24px);
  color: primary(night, 100);
    
  a {
    color: primary(night, 100);
    text-decoration: none;
    border-bottom: 1px solid primary(night, 40);
  }
}

.c-launch__label + .c-launch__caption {
  padding-top: remify(8px);
}

.c-launch--smaller .c-launch__caption {
  @include font-scale(level-2);
  padding: 0 0 remify(16px);
}

.c-launch__links {
  display: flex;
  flex-flow: column;

  .c-magician__card & {
    align-items: center;
    margin: remify(24px) 0 remify(48px); 
  }

  span, a {
    margin-bottom: remify(4px);
  }
}

/*------------------------------------*\
  Oblo modifier
\*------------------------------------*/

.c-launch--oblo {
  max-width: remify(310px);
  border-radius: remify(160px);
  border: 8px solid #FFFFFF;

  .c-launch__image {
    max-height: remify(320px);  
    height: remify(300px);  
    overflow: hidden;
    img { 
      // height: 100%; 
      width: auto; 
      object-fit: cover; 
      object-position: center; 
    }
  }
  .c-launch__label {
    padding: remify(32px) 0;
    background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
  }
}
/*------------------------------------*\
  Simple modifier
\*------------------------------------*/
.c-launch--simple {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: remify(24px);

  // .c-link {
  //   justify-self: flex-end;
  //   margin-top: auto;
  // }
}

.c-launch--simple,
.c-launch--complex {
  background-color: secondary(soft, 100);
  border: 1px solid primary(night, 20);
  color: secondary(text, 100);
  padding: remify(32px);
  position: relative;
  border-radius: remify(16px);
  margin-right: remify(16px);
  margin-bottom: remify(16px);
  height: 100%;

  @supports (display: grid) {
    margin-right: 0;
    margin-bottom: 0;
  }

  &:before {
    display: none;
  }

  .c-launch__title {
    position: relative;
    background-color: transparent;
    border-radius: 0;
    top: 0;
    left: 0;
    padding: 0;
    color: primary(sky, 120);
    @include font-scale(level-3);
  }

  h4 {
    font-weight: fw(bold);
    @include min-screen(bp(tablet)) {
      font-size: 100%;
    }
  }

  // p + p {
  //   margin-top: remify(24px);
  // }

  ul {
    li {
      list-style: disc;
      margin-left: remify(16px);
      margin-bottom: remify(0px);
    }
  }

  .c-link {
    position: relative;
    bottom: 0;
    left: 0;
    transform: translateX(0);
  }

  &.c-launch--darker {
    background-color: primary(sky, 20);
  }

}

/*------------------------------------*\
  Complex modifier
\*------------------------------------*/

.c-launch--complex {
  display: flex;
  flex-direction: column;
  gap: remify(16px);

  .c-magician & {
    display: flex;
    flex-direction: column;
  }

}

/*------------------------------------*\
  Taller modifier
\*------------------------------------*/

.c-launch--taller {

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: remify(60px) remify(16px);

  @include min-screen(bp(tablet-p)) {
    height: remify(420px);
    padding-bottom: remify(110px);
  }

  .o-comparison__item--releveant & {
    @include min-screen(bp(tablet-p)) {
      height: remify(520px);
    }
  }

}

/*------------------------------------*\
  Showcase modifier
\*------------------------------------*/

.c-launch--showcase {

  @include max-screen(bp(tablet)) {
    padding: remify(72px) remify(16px) remify(24px);
  }

  .c-launch__label {
    @include max-screen(bp(tablet)) {
      font-size: 75%;
    }
  }

  .c-launch__caption {
    @include max-screen(bp(tablet)) {
      font-size: 100%;
    }
  }

}

/*------------------------------------*\
  Compact modifier
\*------------------------------------*/

.c-launch--compact {
  padding: remify(80px) remify(16px);
}

/*------------------------------------*\
  Destinations modifier
\*------------------------------------*/

.c-launch--destination {
  display: inline-block;
  @include shadow(base);

  .owl-item.active.center & {
    @include shadow(higher);
  }

  .c-launch__main-img {
    object-fit: cover;
    min-height: 78vw;
    
    @include min-screen( remify(600px) ) {
      min-height: 27vw;
    }
    @include min-screen(bp(tablet-p)) {
      min-height: 22vw;
    }

  }
}

.c-launch__company {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 120px;
  display: flex;
  justify-content: center;

  &.is-wider {
    max-width: 210px;
  }

  img { 
    display: inline-block;
    width: 100%;
  }
}

.c-launch__title {
  position: absolute;
  bottom: remify(24px);
  left: remify(16px);
  right: remify(16px);
  background: rgba(211, 224, 235, 0.8);
  border-radius: 24px;
  padding: remify(16px);
  display: block;
  text-align: center;

  color: primary(night, 100);

  h3, h3 a {
    color: primary(night, 100);
    text-decoration: none;
    @include font-scale(level-2, bold);
  }

  h4, h4 a {
    color: primary(night, 100);
    @include font-scale(level-1-5, semibold);
  }


  .owl-item.center & {
    background: rgba(18, 56, 93, 0.8);
    h3, h3 a,
    h4, h4 a {
      color: #fff;
    }
  }
}

/*------------------------------------*\
  Companies modifier
\*------------------------------------*/

.c-launch--companies {
    @include shadow(small);
    background-color:  secondary(soft, 100);

    &:hover {
      background-color:  #fff;
      @include shadow(higher);
    }


  .c-launch__rounded-label {
    min-height: remify(36px);
    text-align: center;
    padding: remify(12px) 0 0;
    font-size: remify(12px);
  }

  .c-launch__logo {
    min-height: remify(154px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px dashed primary(sky, 20);
  }

  .c-launch__caption {
  @include font-scale(level-2);
  padding: remify(12px) 0;
    
  &, & a {
    color: primary(sky, 100);
  }
}
}

/*------------------------------------*\
  Fullimage modifier
\*------------------------------------*/

.c-launch--fullimage {
  .c-launch__image {
    max-height: unset;
  }
}
  • URL: /components/raw/launch/_launch.scss
  • Filesystem Path: src/views/01-atoms/launch/_launch.scss
  • Size: 7 KB

No notes defined.