Tutorial

<div class="c-cross-sell u-bg-color-sky-10 ">
    <div class="c-cross-sell__wrapper">
        <div class="c-cross-sell__title">
            <div class="u-color-night-100 u-typo-level-6">Rendi la tua esperienza perfetta, acquista ora a <strong>prezzo scontato</strong></div>
        </div>

        <div class="c-cross-sell__services">
            <div class="c-additional-service c-additional-service--smaller">

                <div class="c-additional-service__main">

                    <div class="c-additional-service__content">
                        <div class="c-additional-service__title"><strong>Regalati un ingresso alla vip lounge a soli € 24,00</strong> </div>
                        <div class="c-additional-service__subtitle">anziché €28,00 se lo acquisti insieme al parcheggio!</div>
                        <div class="c-additional-service__text"><small>I bambini sotto i 10 anni entrano gratis!</small></div>
                    </div>

                    <div class="c-additional-service__image">
                        <img src="../../images/oblo-mbl.png" alt="MBL Vip Lounge">
                    </div>

                </div>

                <div class="c-additional-service__features">

                    <a href="#" class="c-additional-service__discover">
                        Scopri di più
                    </a>
                    <div class="c-additional-service__voucher">
                        <div class="c-highlight c-highlight--small">
                            <p>Hai a disposizione <strong>[1] voucher MBL.</strong></p>
                        </div>
                    </div>

                </div>

                <div class="c-additional-service__action">

                    <div class="c-additional-service__image">
                        <img src="../../images/oblo-mbl.png" alt="MBL Vip Lounge">
                    </div>

                    <div class="c-additional-service__price">
                        <span class="price__full barred" aria-hidden="true">€ 28,00</span>
                        <strong class="price__value">€ 24,00</strong>
                        <span class="price__text">Totale ingresso Lounge</span>
                    </div>

                    <button type="button" class="c-button c-button--adding js-qty-trigger js-toggle" aria-label="Aggiungi un accesso alla Vip Lounge" data-toggle="lounge-service">

                        Aggiungi

                    </button>
                    <div class="c-button c-button--qty js-btn-qty" aria-label="Seleziona il numero">
                        <button type="button" class="minus js-toggle-remove" aria-label="Diminuisci di uno" data-toggle="lounge-service">-</button>
                        <input type="number" class="js-qty-value" value="1" readonly id="vip_lounge_qty" aria-label="Quantità" min="1">
                        <button type="button" class="plus js-toggle-add" aria-label="Aumenta di uno" data-toggle="lounge-service">+</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="c-cross-sell u-bg-color-sky-10 {{modifier}}">
  <div class="c-cross-sell__wrapper">
    <div class="c-cross-sell__title">
      <div class="u-color-night-100 u-typo-level-6">{{{title}}}</div>
    </div>

    <div class="c-cross-sell__services">
      {{#each service }}
        {{ render "@additional-service" this merge=true }}
      {{/each}}
    </div>
  </div>
</div>
{
  "title": "Rendi la tua esperienza perfetta, acquista ora a <strong>prezzo scontato</strong>",
  "service": [
    {
      "modifier": "c-additional-service--smaller",
      "title": "Regalati un ingresso alla vip lounge a soli € 24,00",
      "subtitle": "anziché €28,00 se lo acquisti insieme al parcheggio!",
      "text": "<small>I bambini sotto i 10 anni entrano gratis!</small>",
      "img": {
        "path": "/images/oblo-mbl.png",
        "alt": "MBL Vip Lounge"
      },
      "features": false,
      "discover-more": {
        "modifier": "c-additional-service__discover",
        "text": "Scopri di più",
        "url": "#"
      },
      "price": {
        "full": "€ 28,00",
        "value": "€ 24,00",
        "text": "Totale ingresso Lounge"
      },
      "btn": {
        "type": "button",
        "aria-label": "Aggiungi un accesso alla Vip Lounge",
        "text": "Aggiungi",
        "modifier": "c-button--adding js-qty-trigger js-toggle",
        "data-toggle": "lounge-service"
      },
      "quantity": {
        "modifier": "js-btn-qty",
        "input-id": "vip_lounge_qty"
      }
    }
  ]
}
  • Content:
    .c-cross-sell {
      main & {
        grid-column: full;
        margin-top: remify(80px);
        padding: remify(24px);
        @include min-screen( bp(tablet-p) ) {
          padding: remify(24px) 0;
        }
      }
    }
    
    .c-cross-sell__wrapper {
      max-width: remify($base-page-width);
      margin: 0 auto;
    
      @include min-screen( bp(tablet-p) ) {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    
    
    .c-cross-sell__title,
    .c-cross-sell__services {
      flex: 1 1 50%;
    }
    
    .c-cross-sell__title {
      margin-bottom: remify(24px);
      @include min-screen( bp(tablet-p) ) {
        padding-right: remify(24px);
        margin-bottom: 0;
      }
    }
  • URL: /components/raw/cross-sell/_cross-sell.scss
  • Filesystem Path: src/views/03-organisms/cross-sell/_cross-sell.scss
  • Size: 626 Bytes

No notes defined.