Aeroporto di Bologna - Design System

Pill 

<div class="c-pill">

    <h3>Oppure</h3>

    <img class="c-pill__logo" src="/images/svgs/youfirst.svg" alt="you first logo" aria-hidden="true">
    <h2>Scegli un'accoglienza ancora più esclusiva</h2>
    <div class="c-pill__compound">

        <div class="c-pill__first-half">
            <section class="c-carousel c-carousel--gallery" aria-hidden="true">

                <div class="jsInstance owl-carousel">
                    <div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
                    <div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
                    <div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
                    <div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
                </div>

            </section>

        </div>

        <div class="c-pill__second-half">
            <h4>Youfirst, il servizio vip per viaggiare in tutta serenità!</h4>
            <p>Risparima tempo senza rinunciare al comfort</p>
            <ul>
                <li>+ <strong>Servizio personalizzato</strong> con staff dedicato</li>
                <li>+ <strong>Transfer da/per l'aereo</strong> con mezzo privato</li>
                <li>+ <strong>Fast track check-in e drop-off bagaglio</strong> in stiva</li>
                <li>+ <strong>Ingresso Vip Lounge incluso</strong> e molto altro...</li>
            </ul>
            <a href="#" class="c-link c-link--primary">
                <span>Scopri di più</span>
                <svg class="svg-24">
                    <use xlink:href="#ic_chevron_right_black_24px"></use>
                </svg></a>
        </div>

    </div>
</div>
 
<div class="c-pill">
  
  <h3>Oppure</h3>

  <img class="c-pill__logo" src="{{ logo-src }}" alt="{{ logo-alt }}" aria-hidden="true">
  <h2>Scegli un'accoglienza ancora più esclusiva</h2>
  <div class="c-pill__compound">

    <div class="c-pill__first-half">
      {{render "@carousel--background-gallery" }}
    </div>

    <div class="c-pill__second-half">
      <h4>Youfirst, il servizio vip per viaggiare in tutta serenità!</h4>
      <p>Risparima tempo senza rinunciare al comfort</p>
      <ul>
        <li>+ <strong>Servizio personalizzato</strong> con staff dedicato</li>
        <li>+ <strong>Transfer da/per l'aereo</strong> con mezzo privato</li>
        <li>+ <strong>Fast track check-in e drop-off bagaglio</strong> in stiva</li>
        <li>+ <strong>Ingresso Vip Lounge incluso</strong> e molto altro...</li>
      </ul>
      {{> @link--primary text="Scopri di più" url="#" svg="true" modifier="c-link--primary" }}  
    </div>

  </div>
</div>
 
{
  "logo-src": "/images/svgs/youfirst.svg",
  "logo-alt": "you first logo"
}
  • Content: 
    .c-pill {

  main & {
    grid-column: main;
    margin-bottom: remify(80px);
  }

  h2 {
    color: primary(night, 100);
    font-size: 125%;
    line-height: 1.4;
    margin-bottom: remify(32px);
    text-align: center;

    @include min-screen(bp(tablet)) {
      font-size: 200%;
      line-height: 1.25;
    }

  }

  h3 {
    color: primary(night, 120);
    font-size: 120%;
    text-align: center;
    font-weight: fw(bold);

    @include min-screen(bp(tablet)) {
      font-size: 150%;
      margin-bottom: remify(16px);
    }

  }

}

.c-pill__logo {
  display: block;
  margin: 0 auto remify(24px);
  width: remify(180px);


  @include min-screen(bp(tablet)) {
    width: remify(240px);
  }
}

.c-pill__compound {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  align-items: center;

  @include min-screen(bp(tablet-p)) {
    flex-direction: row;
    max-width: remify(900px);
    align-items: initial;
  }

}

.c-pill__first-half {
  width: 100%;

  @include min-screen(bp(tablet)) {
    width: remify(640px);
  }

  @include min-screen(bp(tablet-p)) {
    max-width: 50%;
  }

  .c-carousel__outer {
    border-radius: remify(4px) remify(4px) 0 0;

    @include min-screen(bp(tablet-p)) {
      border-radius: remify(4px) 0 0 remify(4px);
    }

  }
}

.c-pill__second-half {
  width: 100%;
  padding: remify(24px);
  background-color: primary(night, 100);
  color: #fff;
  border-radius: 0 0 remify(4px) remify(4px);

  @include min-screen(bp(tablet)) {
    width: remify(640px);
  }

  @include min-screen(bp(tablet-p)) {
    border-radius: 0 remify(4px) remify(4px) 0;
    max-width: 50%;
  }
  
  p {
    color: currentColor;
  }

  h4 {
    font-size: 125%;
    line-height: 1.4;
    font-weight: fw(bold);
    color: currentColor;
    margin-bottom: remify(24px);
  }

}
  • URL: /components/raw/pill/_pill.scss
  • Filesystem Path: src/views/03-organisms/pill/_pill.scss
  • Size: 1.8 KB

No notes defined.