Aeroporto di Bologna - Design System

Cart Item 

<div class="c-cart-item">

    <div class="c-cart-item__block">
        <div class="c-cart-item__img-container">
            <img src="/images/svgs/p1.svg" alt="Parcheggio P1" class="c-cart-item__img">
        </div>
        <div class="c-cart-item__body">
            <p class="c-cart-item__name">P1 Terminal</p>
            <div class="c-cart-item__info">
                <p class="start-date">10/03/2025</p>
                <p class="end-date">15/03/2025</p>
                <p class="qty">x2</p>
            </div>
        </div>
    </div>

    <div class="c-cart-item__block">
        <p class="c-cart-item__price">15 €</p>
        <div class="c-cart-item__cta">
            <button type="button" class="c-cart-item__btn-delete js-fr-dialogmodal-open" aria-label="Elimina parcheggio" aria-controls="dialog-parking-item-deletion">
                <svg class="c-icon c-icon--24">
                    <use xlink:href="#ic-trash"></use>
                </svg> </button>
        </div>
    </div>

</div>
 
<div class="c-cart-item{{#if modifier}} {{modifier}}{{/if}}">
  
  <div class="c-cart-item__block">
    <div class="c-cart-item__img-container">
      <img src="{{ item-info.img.src }}" alt="{{ item-info.img.alt }}" class="c-cart-item__img">
    </div>
    <div class="c-cart-item__body">
      <p class="c-cart-item__name">{{ item-info.name }}</p>
      <div class="c-cart-item__info">
        <p class="start-date">{{item-info.start-date}}</p>
        <p class="end-date">{{item-info.end-date}}</p>
        <p class="qty">{{item-info.qty}}</p>
      </div>
    </div>
  </div>

  <div class="c-cart-item__block">
    <p class="c-cart-item__price">{{item-info.price}} €</p>
    <div class="c-cart-item__cta">
      <button type="button" class="c-cart-item__btn-delete js-fr-dialogmodal-open" aria-label="Elimina parcheggio" aria-controls="dialog-parking-item-deletion">
        {{> @icon symbol="ic-trash" class="c-icon c-icon--24"}}
      </button>
    </div>
  </div>

</div>
 
{
  "item-info": {
    "img": {
      "src": "/images/svgs/p1.svg",
      "alt": "Parcheggio P1"
    },
    "name": "P1 Terminal",
    "start-date": "10/03/2025",
    "end-date": "15/03/2025",
    "qty": "x2",
    "price": "15"
  },
  "btn-delete": {
    "modifier": "c-button--icon c-cart-item__btn-delete",
    "type": "button",
    "aria-label": "Elimina parcheggio",
    "svg": {
      "symbol": "ic-trash",
      "class": "c-icon c-icon--24"
    }
  }
}
  • Content: 
    .c-cart-item {
  display: flex;
  gap: remify(16px);
  justify-content: space-between;
  padding-block: remify(12px);
  background-color: secondary(basic-white, 100);
  color: primary(night, 100);
}

.c-cart-item__block {
  display: flex;
  gap: remify(16px);
  align-items: flex-end;
}

.c-cart-item__img {
  width: remify(32px);
}

.c-cart-item__name {
  @include font-scale(level-2);
  margin-bottom: remify(-4px);
  text-transform: uppercase;
}

.c-cart-item__info {
  display: flex;
  align-items: flex-end;
  gap: remify(20px);

  .start-date, .end-date {
    position: relative;
    @include font-scale(level-1-5);
  }

  .start-date:after {
    content: "";
    display: inline-block;
    --s: 1px;
    height: 10px;
    aspect-ratio: 2 / 5;
    clip-path: polygon(0 0, var(--s) 0, 100% 50%, var(--s) 100%, 0 100%, calc(100% - var(--s)) 50%);
    background: primary(sky, 60);
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 8px;
  }

}

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

.c-cart-item__btn-delete {
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  vertical-align: bottom;
  color: primary(night, 60);
}
  • URL: /components/raw/cart-item/_cart-item.scss
  • Filesystem Path: src/views/03-organisms/cart-item/_cart-item.scss
  • Size: 1.2 KB

No notes defined.