Aeroporto di Bologna - Design System

Parking: Compact 

<div class="c-parking c-parking--compact">

    <div class="c-parking__header">
        <div class="c-parking__name">
            <div class="c-parking_name">
                <img src="/images/svgs/parking-p3-icon.svg" alt="" class="c-parking_name__img">
                <p class="c-parking_name__title">Comfort</p>
            </div>
        </div>
        <div class="c-parking__fare">
            <div class="button"><button type="" class="c-button c-button--submit">

                    Acquista ora

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

    <div class="c-parking__body">
        <div class="c-parking__features">
            <dl class="c-parking__features-list">
                <div class="feature-text">
                    <dt class="feature-key">Copertura</dt>
                    <dd class="feature-value">60% Coperto</dd>
                </div>
                <div class="feature-text">
                    <dt class="feature-key">Distanza dal terminal</dt>
                    <dd class="feature-value">Di fronte al Terminal. 1 min. a piedi.</dd>
                </div>
                <div class="feature-text">
                    <dt class="feature-key">Telepedaggio</dt>
                    <dd class="feature-value">
                        <span class="feature-icon">
                            <img src="/images/svgs/telepass-unipol.svg" alt="Telepass e Unipolmove abilitati" />
                        </span>
                    </dd>
                </div>
                <div class="feature-text">
                    <dt class="feature-key">Posti riservati</dt>
                    <dd>
                        <span aria-hidden="true" class="feature-value">—</span>
                        <span class="u-visuallyhidden">Non disponibile</span>
                    </dd>
                </div>
            </dl>
        </div>
    </div>

    <div class="c-parking__footer">
        <a href="#">
            Altre informazioni sul P3 Comfort
            <svg class="c-icon c-icon--24" role="presentation">
                <use xlink:href="#ic_chevron_right_black_24px"></use>
            </svg></a>
    </div>

</div>
 
<div class="c-parking c-parking--compact{{#if modifier}} {{modifier}}{{/if}}">
  
  {{!-- HEADER --}}
  <div class="c-parking__header">
    <div class="c-parking__name">{{> @parking-name parking-name}}</div>
    <div class="c-parking__fare">
      <div class="button">{{> @button main-btn }}</div>
    </div>
  </div>
  {{!-- END HEADER --}}
  
  {{!-- BODY --}}
  <div class="c-parking__body">
    <div class="c-parking__features">
      <dl class="c-parking__features-list">
        {{#each features}}
        {{!-- <div> --}}
          <div class="feature-text">
            <dt class="feature-key">{{{ feature.key }}}</dt>
            {{#if feature.value}}
              <dd class="feature-value">{{{ feature.value }}}</dd>
            {{else if feature.img}}
              <dd class="feature-value">
                <span class="feature-icon">
                  <img src="{{ feature.img.src }}" alt="{{ feature.img.alt }}" />
                </span>
              </dd>
            {{else}}
              <dd>
                <span aria-hidden="true" class="feature-value">—</span>
                <span class="u-visuallyhidden">Non disponibile</span>
              </dd>
            {{/if}}
          </div>
        {{!-- </div> --}}
        {{/each}}
      </dl>
    </div>
  </div>
  {{!-- END BODY --}}

  {{!-- FOOTER --}}
  <div class="c-parking__footer">
    {{> @link footer-cta }}
  </div>
  {{!-- END FOOTER --}}

</div>
 
{
  "parking-name": {
    "title": "Comfort",
    "img": {
      "src": "/images/svgs/parking-p3-icon.svg"
    }
  },
  "fare": {
    "price": "€ 12,00"
  },
  "main-btn": {
    "text": "Acquista ora",
    "modifier": "c-button--submit"
  },
  "features": [
    {
      "feature": {
        "key": "Copertura",
        "value": "60% Coperto"
      }
    },
    {
      "feature": {
        "key": "Distanza dal terminal",
        "value": "Di fronte al Terminal. 1 min. a piedi."
      }
    },
    {
      "feature": {
        "key": "Telepedaggio",
        "img": {
          "src": "/images/svgs/telepass-unipol.svg",
          "alt": "Telepass e Unipolmove abilitati"
        }
      }
    },
    {
      "feature": {
        "key": "Posti riservati",
        "value": false
      }
    }
  ],
  "footer-cta": {
    "name": "default",
    "text": "Altre informazioni sul P3 Comfort",
    "url": "#",
    "svg": {
      "class": "c-icon c-icon--24",
      "symbol": "ic_chevron_right_black_24px"
    }
  }
}
  • Content: 
    .c-parking {
  border: 1px solid primary(night,20);
  border-radius: remify(8px);
  overflow: hidden;
  background-color: secondary(basic-white, 100);
}

.c-parking__header {
  background-color: secondary(soft, 100);
  padding: remify(12px) remify(16px);
  display: flex;
  align-items: center;
  gap: remify(8px);
  justify-content: space-between;
}

.c-parking .c-parking_name__title {
  display: none;
  @include min-screen(bp(phablet)) {
    display: block;
  }
}

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

  @include min-screen(bp(phablet)) {
    justify-content: initial;
    flex-grow: initial;
  }

  .price-info {
    @include min-screen(bp(phablet)) {
      display: flex;
      align-items: flex-end;
      flex-direction: column;
      flex-basis: remify(210px);
    }
  }

  .fare-text {
    @include font-scale(level-1);
    color: primary(night, 80);
  }

  .fare-price {
    @include font-scale(level-5, bold);
  }

}

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

.c-parking__features-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: remify(8px);

  @include min-screen(bp(phablet)) {
    grid-template-columns: repeat(auto-fill, minmax(remify(140px), 1fr));
  }
}

.c-parking__features .feature-icon {
  color: primary(night, 100);
}

.c-parking__features .feature-text {
  @include font-scale(level-1);
  color: primary(night, 120);

  a {
    color: currentColor;
  }
}

.c-parking__features .feature-value {
  font-weight: fw(bold);
}

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

/*------------------------------------*\
  Compact modifier
\*------------------------------------*/
.c-parking--compact {
  
  .c-parking__features-list {
    grid-template-columns: repeat(2, 1fr);
    gap: remify(8px);
  }

  .c-parking__features .feature-text {
    display: flex;
    flex-direction: column;
    gap: remify(4px);
  }

  .c-parking__footer {
    @include font-scale(level-1);
    padding-top: 0;
  }

}

/*------------------------------------*\
  Tall modifier
\*------------------------------------*/
.c-parking--tall {
  background-color: secondary(soft, 100);
  border: remify(1px) solid primary(night, 20);

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

  .feature-text {
    display: flex;
    flex-direction: column;
    gap: remify(2px);
  }

  .c-parking__body {
    padding-top: 0;
  }

  .c-parking__footer {
    border-top: remify(1px) solid primary(night, 20);

    .c-button--submit {
      width: 100%;
    }
  }

}
  • URL: /components/raw/parking/_parking.scss
  • Filesystem Path: src/views/02-molecules/parking/_parking.scss
  • Size: 2.6 KB

No notes defined.