Aeroporto di Bologna - Design System

Fare: Enriched 

<div class="c-fare c-fare--enriched ">

    <div class="c-fare__header">
        <div class="c-fare__header-info">
            <p class="c-fare__name">Acquisto online</p>
            <div class="c-fare__header-label">
                <span class="c-rounded-label c-rounded-label--positive c-rounded-label--small" aria-label="">

                    Posto garantito
                </span>
            </div>
        </div>
        <div>
            <img src="../../images/svgs/stk_buyonline.svg" class="c-fare__header-img" alt="">
        </div>
    </div>

    <div class="c-fare__body">
        <div class="c-fare__item">
            <div class="c-fare__item-icon">
                <svg class="c-icon c-icon--24 c-icon--positive">
                    <use xlink:href="#ic-confirm-24px"></use>
                </svg>
            </div>
            <div class="c-fare__item-content">
                <div class="c-fare__item-title">Carte di debito/Credito</div>

            </div>
        </div>
        <div class="c-fare__item">
            <div class="c-fare__item-icon">
                <svg class="c-icon c-icon--24 c-icon--positive">
                    <use xlink:href="#ic-confirm-24px"></use>
                </svg>
            </div>
            <div class="c-fare__item-content">
                <div class="c-fare__item-title">Satispay</div>

            </div>
        </div>
        <div class="c-fare__item unavailable">
            <div class="c-fare__item-icon">
                <svg class="c-icon c-icon--24 c-icon--negative">
                    <use xlink:href="#ic_cancel_black_24px"></use>
                </svg>
            </div>
            <div class="c-fare__item-content">
                <div class="c-fare__item-title">
                    <p>Telepedaggio</p>
                    <p class='not-available-txt'>(Non disponibile)</p>
                </div>

            </div>
        </div>
        <div class="c-fare__item">
            <div class="c-fare__item-icon">
                <svg class="c-icon c-icon--24 c-icon--positive">
                    <use xlink:href="#ic-confirm-24px"></use>
                </svg>
            </div>
            <div class="c-fare__item-content">
                <div class="c-fare__item-title">Posto riservato da 3 ore prima del tuo arrivo</div>

            </div>
        </div>

        <div class="paragraph">
            <div class="paragraph__title">Informazioni importanti</div>
            <div class="paragraph__text">Se acquisti online, disattiva il dispositivo di telepedaggio (Telepass/Unipolmove) prima dell’uscita per evitare un doppio pagamento.</div>
        </div>

    </div>

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

  <div class="c-fare__header">
    <div class="c-fare__header-info">
      <p class="c-fare__name">{{ name }}</p>
      <div class="c-fare__header-label">
        {{> @rounded-label header-label }}
      </div>
    </div>
    <div>
      <img src="{{ path header-img.src }}" class="c-fare__header-img" alt="">
    </div>
  </div>

  <div class="c-fare__body">
    {{#each items}}
    <div class="c-fare__item{{#if class}} {{class}}{{/if}}">
      <div class="c-fare__item-icon">
        {{> @icon fare-item-icon }}
      </div>
      <div class="c-fare__item-content">
        <div class="c-fare__item-title">{{{ title }}}</div>
        {{#if body}}<div class="c-fare__item-body">{{{ body }}}</div>{{/if}}
      </div>
    </div>
    {{/each}}

    {{#if paragraph }}
    <div class="paragraph">
      <div class="paragraph__title">{{{ paragraph.title }}}</div>
      <div class="paragraph__text">{{{ paragraph.text }}}</div>
    </div>
    {{/if}}

  </div>

</div>
 
{
  "fare-route-round": {
    "type": "Andata",
    "route-name": "Promotional"
  },
  "fare-route-trip": {
    "type": "Ritorno",
    "route-name": "Business"
  },
  "items": [
    {
      "fare-item-icon": {
        "symbol": "ic-confirm-24px",
        "class": "c-icon c-icon--24 c-icon--positive"
      },
      "title": "Carte di debito/Credito"
    },
    {
      "fare-item-icon": {
        "symbol": "ic-confirm-24px",
        "class": "c-icon c-icon--24 c-icon--positive"
      },
      "title": "Satispay"
    },
    {
      "class": "unavailable",
      "fare-item-icon": {
        "symbol": "ic_cancel_black_24px",
        "class": "c-icon c-icon--24 c-icon--negative"
      },
      "title": "<p>Telepedaggio</p><p class='not-available-txt'>(Non disponibile)</p>"
    },
    {
      "fare-item-icon": {
        "symbol": "ic-confirm-24px",
        "class": "c-icon c-icon--24 c-icon--positive"
      },
      "title": "Posto riservato da 3 ore prima del tuo arrivo"
    }
  ],
  "btn-submit": {
    "modifier": "c-button--submit",
    "type": "button",
    "text": "Seleziona e continua"
  },
  "name": "Acquisto online",
  "header-label": {
    "text": "Posto garantito",
    "modifier": "c-rounded-label--positive c-rounded-label--small"
  },
  "header-img": {
    "src": "/images/svgs/stk_buyonline.svg"
  },
  "paragraph": {
    "title": "Informazioni importanti",
    "text": "Se acquisti online, disattiva il dispositivo di telepedaggio (Telepass/Unipolmove) prima dell’uscita per evitare un doppio pagamento."
  }
}
  • Content: 
    .c-fare {
  --fare-padding: #{remify(24px)};
  display: flex;
  flex-direction: column;
  border-radius: remify(12px);
  overflow: hidden;
  @include shadow(high);
  background-color: secondary(soft, 100);
}

.c-fare__header {
  background-color: primary(night, 100);
  color: secondary(basic-white, 100);
  padding: var(--fare-padding);
}

.c-fare__route {
  border-top: remify(1px) solid primary(night, 40);
  padding-top: remify(16px);
  margin-top: remify(16px);
}

.c-fare__name {
  @include font-scale(level-2);
  text-align: center;
}

.c-fare__price {
  @include font-scale(level-6);
  font-weight: fw(bold);
  text-align: center;
}

.c-fare__body {
  padding: var(--fare-padding);

  .paragraph {
    margin-top: remify(24px);
    color: primary(night, 100);
  }

  .paragraph__title {
    @include font-scale(level-2, semibold);
    margin-bottom: remify(4px);
  }

  .paragraph__text {
    @include font-scale(level-1-5);
  }

}

.c-fare__item {
  display: flex;
  gap: remify(8px);
  color: primary(night, 100);
}

.c-fare__item + .c-fare__item {
  margin-top: remify(16px);
}

.c-fare__item-title {
  @include font-scale(level-2);
  font-weight: fw(semibold);
  margin-bottom: remify(4px);

  .not-available-txt {
    @include font-scale(level-1);
    font-weight: fw(regular);
    margin-left: remify(4px);
  }

  * {
    display: inline-block;
  }

}

.c-fare__item-body {
  @include font-scale(level-1-5);
}

.c-fare__footer {
  padding-inline: var(--fare-padding);
  padding-bottom: var(--fare-padding);
  text-align: center;
  margin-top: auto;
}

.c-fare__header-img {
  width: remify(72px);
  aspect-ratio: 1 / 1;
}

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

/*------------------------------------*\
  Modifier Enriched
\*------------------------------------*/
.c-fare--enriched {

  .c-fare__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: remify(16px);
  }

  .c-fare__name {
    @include font-scale(level-4, bold);
    text-align: initial;
    text-transform: uppercase;
  }

}
  • URL: /components/raw/fare/_fare.scss
  • Filesystem Path: src/views/02-molecules/fare/_fare.scss
  • Size: 2.1 KB

No notes defined.