Aeroporto di Bologna - Design System

Tuned: Default 

<div class="c-tuned " id="chatbot-scroll">

    <p class="c-tuned__title">Vuoi ricevere notifiche in tempo reale sullo stato del tuo volo?</p>

    <p class="c-tuned__body">Chiedi a Guglielmo, il nostro chatbot su messenger!</p>

    <ul class="c-tuned__apps">
        <li>
            <button type="button" class="c-button c-button--messenger">
                <span>Segui volo</span> <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic-messenger"></use>
                </svg>
            </button>
        </li>
    </ul>

</div>
 
<div class="c-tuned {{ modifier }}" id="chatbot-scroll">

  <p class="c-tuned__title">{{{ title }}}</p>

  <p class="c-tuned__body">{{{ body }}}</p>

  <ul class="c-tuned__apps">
    <li>
      <button type="button" class="c-button c-button--messenger">
        <span>Segui volo</span> {{> @icon class="c-icon c-icon--24" symbol="ic-messenger" }}
      </button>
    </li>
  </ul>
 
</div>
 
{
  "title": "Vuoi ricevere notifiche in tempo reale sullo stato del tuo volo?",
  "body": "Chiedi a Guglielmo, il nostro chatbot su messenger!"
}
  • Content: 
    .c-tuned {
  padding: remify(24px);
  background-color: primary(night, 20);
  text-align: center;
  color: primary(night, 100);
  border-radius: remify(16px);
}

.c-tuned__title {
  font-weight: fw(bold);
  font-size: 125%;
  line-height: 1.4;
  margin-bottom: remify(16px);

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

}

.c-tuned__body {
  font-weight: fw(regular);
  margin-bottom: remify(24px);
  font-size: 125%;

  strong {
    font-weight: fw(semibold);
  }

}

.c-tuned__apps {

  @include min-screen(bp(phone)) {
    display: flex;
    justify-content: center;
  }

  li {
    margin-bottom: remify(16px);

    @include min-screen(bp(phone-p)) {
      margin-bottom: 0;
      margin-right: remify(16px);
    }

    button svg { fill: secondary(page, 100); }
  }

}

/*------------------------------------*\
  As footer modifier
\*------------------------------------*/

.c-tuned--as-footer {
  border-radius: remify(16px);
  margin-bottom: remify(48px);
}
  • URL: /components/raw/tuned/_tuned.scss
  • Filesystem Path: src/views/02-molecules/tuned/_tuned.scss
  • Size: 1 KB

No notes defined.