Aeroporto di Bologna - Design System

Promo Codes 

<div class="c-promo-codes o-collapsible o-collapsible--raw ">

    <div class="c-promo-codes__header o-collapsible__title js-collapsible-title" id="promo-codes-accordion">
        <img src="../../images/svgs/stk-voucher.svg" alt="" class="c-promo-codes__img">
        <p>Utilizza i [110 €] di credito che hai a disposizione</p>
    </div>

    <div class="c-promo-codes__content">
        <div class="c-promo-codes__items">
            <div class="c-promo-codes__item">

                <div class="c-selection c-selection--promo-code">

                    <input class="c-selection__checkbox u-visuallyhidden" type="checkbox" name="" id="-75">
                    <label class="c-selection__label" for="-75">
                        <span class="u-visuallyhidden">scadenza: 07/12/2025</span>
                    </label>
                    <div class="c-selection__input c-selection__input--checkbox"></div>
                    <p class="promo-code__value mobile">50€</p>

                    <div class="promo-code__contents">
                        <p class="promo-code__value desk">50€</p>
                        <p class="promo-code__due-date">scadenza: 07/12/2025</p>
                        <p class="promo-code__id">#ADV-1234</p>
                    </div>

                </div>
            </div>
            <div class="c-promo-codes__item">

                <div class="c-selection c-selection--promo-code">

                    <input class="c-selection__checkbox u-visuallyhidden" type="checkbox" name="" id="-42">
                    <label class="c-selection__label" for="-42">
                        <span class="u-visuallyhidden">scadenza: 07/12/2025</span>
                    </label>
                    <div class="c-selection__input c-selection__input--checkbox"></div>
                    <p class="promo-code__value mobile">30€</p>

                    <div class="promo-code__contents">
                        <p class="promo-code__value desk">30€</p>
                        <p class="promo-code__due-date">scadenza: 07/12/2025</p>
                        <p class="promo-code__id">#ADV-1235</p>
                    </div>

                </div>
            </div>
            <div class="c-promo-codes__item">

                <div class="c-selection c-selection--promo-code">

                    <input class="c-selection__checkbox u-visuallyhidden" type="checkbox" name="" id="-71">
                    <label class="c-selection__label" for="-71">
                        <span class="u-visuallyhidden">scadenza: 07/12/2025</span>
                    </label>
                    <div class="c-selection__input c-selection__input--checkbox"></div>
                    <p class="promo-code__value mobile">30€</p>

                    <div class="promo-code__contents">
                        <p class="promo-code__value desk">30€</p>
                        <p class="promo-code__due-date">scadenza: 07/12/2025</p>
                        <p class="promo-code__id">#ADV-1236</p>
                    </div>

                </div>
            </div>
        </div>
        <div class="c-promo-codes__info">
            <p>Il sistema seleziona automaticamente i crediti con scadenza più vicina, e con l’importo necessario a coprire il costo del tuo acquisto corrente.</p>
            <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-controls="dialog-credits-info">

                Informazioni sui crediti

            </button>
        </div>
    </div>

</div>
 
<div class="c-promo-codes o-collapsible o-collapsible--raw {{#if modifier}} {{modifier}}{{/if}}">
  
  <div class="c-promo-codes__header o-collapsible__title js-collapsible-title" id="promo-codes-accordion">
    <img src="{{ path img.src }}" alt="{{ img.alt }}" class="c-promo-codes__img">
    <p>{{ title }}</p>
  </div>

  <div class="c-promo-codes__content">
    <div class="c-promo-codes__items">
      {{#each items}}
      <div class="c-promo-codes__item">
        {{> @selection--promo-code promo-code }}
      </div>
      {{/each}}
    </div>
    <div class="c-promo-codes__info">
      <p>{{{ info-text }}}</p>
      {{> @button btn-info }}
    </div>
  </div>

</div>
 
{
  "title": "Utilizza i [110 €] di credito che hai a disposizione",
  "img": {
    "src": "/images/svgs/stk-voucher.svg",
    "alt": ""
  },
  "items": [
    {
      "promo-code": {
        "text": "scadenza: 07/12/2025",
        "extra-text": "#ADV-1234",
        "value": "50€"
      }
    },
    {
      "promo-code": {
        "text": "scadenza: 07/12/2025",
        "extra-text": "#ADV-1235",
        "value": "30€"
      }
    },
    {
      "promo-code": {
        "text": "scadenza: 07/12/2025",
        "extra-text": "#ADV-1236",
        "value": "30€"
      }
    }
  ],
  "info-text": "Il sistema seleziona automaticamente i crediti con scadenza più vicina, e con l’importo necessario a coprire il costo del tuo acquisto corrente.",
  "btn-info": {
    "type": "button",
    "text": "Informazioni sui crediti",
    "modifier": "c-button--as-link js-fr-dialogmodal-open",
    "opens-dialog": "dialog-credits-info"
  }
}
  • Content: 
    .c-promo-codes {
  background-color: secondary(soft, 100);
  border: remify(1px) solid primary(night, 20);
  border-radius: remify(16px);

  .c-collapsible__button {
    padding: 0;
    width: 100%;
    cursor: pointer;
    gap: remify(8px);
    padding: remify(16px);

    svg {
      height: remify(24px);
      min-width: remify(24px);
      margin-left: auto;
      * {
        fill: currentColor;
      }
    }

  }

}

.c-promo-codes__header {
  @include font-scale(level-2, bold);
}

.c-promo-codes__img {
  width: remify(40px);
}

.c-promo-codes__content {
  padding: remify(16px);
}

.c-promo-codes__items {
  display: flex;
  flex-direction: column;
  gap: remify(16px);
}

.c-promo-codes__info {
  margin-top: remify(8px);
  
  p {
    @include font-scale(level-1-5);
  }

  .c-button {
    margin-top: remify(8px);
    color: primary(night, 120);
    @include font-scale(level-2, semibold);
  }

}
  • URL: /components/raw/promo-codes/_promo-codes.scss
  • Filesystem Path: src/views/03-organisms/promo-codes/_promo-codes.scss
  • Size: 909 Bytes

No notes defined.