Aeroporto di Bologna - Design System

Chips: Filters 

<div class="c-chips c-chips--filters ">
    <ul class="c-chips__list">
        <li class="c-chips__list-item">
            <div class="c-chip c-chip--filter ">
                <span>Milano Linate [LIN]</span>
                <button class="c-chip__button"><svg class="c-icon c-icon--18">
                        <use xlink:href="#ic_close_black_24px"></use>
                    </svg></button>
            </div>
        </li>
        <li class="c-chips__list-item">
            <div class="c-chip c-chip--filter ">
                <span>Partenza Andata (06:00 - 10:00)</span>
                <button class="c-chip__button"><svg class="c-icon c-icon--18">
                        <use xlink:href="#ic_close_black_24px"></use>
                    </svg></button>
            </div>
        </li>
        <li class="c-chips__list-item">
            <div class="c-chip c-chip--filter ">
                <span>Arrivo Andata (14:00 - 18:00)</span>
                <button class="c-chip__button"><svg class="c-icon c-icon--18">
                        <use xlink:href="#ic_close_black_24px"></use>
                    </svg></button>
            </div>
        </li>
        <li class="c-chips__list-item">
            <div class="c-chip c-chip--filter ">
                <span>Voli con scalo</span>
                <button class="c-chip__button"><svg class="c-icon c-icon--18">
                        <use xlink:href="#ic_close_black_24px"></use>
                    </svg></button>
            </div>
        </li>
        <li class="c-chips__list-item">
            <div class="c-chip c-chip--filter ">
                <span>Alitalia</span>
                <button class="c-chip__button"><svg class="c-icon c-icon--18">
                        <use xlink:href="#ic_close_black_24px"></use>
                    </svg></button>
            </div>
        </li>
        <li class="c-chips__list-item c-chips__list-item--reset">
            <button type="button" class="c-button c-button--as-link">

                Azzera tutti i filtri

            </button>
        </li>
    </ul>
</div>
 
<div class="c-chips c-chips--filters {{ modifier }}">
  <ul class="c-chips__list">
    {{#each items}}
    <li class="c-chips__list-item">
      {{> @chip--filter}}
    </li>
    {{/each}}
    <li class="c-chips__list-item c-chips__list-item--reset">
      {{> @button reset-filters-btn}}
    </li>
  </ul>
</div>
 
{
  "items": [
    {
      "text": "Milano Linate [LIN]",
      "chip-icon": {
        "class": "c-icon c-icon--18",
        "symbol": "ic_close_black_24px"
      }
    },
    {
      "text": "Partenza Andata (06:00 -  10:00)",
      "chip-icon": {
        "class": "c-icon c-icon--18",
        "symbol": "ic_close_black_24px"
      }
    },
    {
      "text": "Arrivo Andata (14:00 -  18:00)",
      "chip-icon": {
        "class": "c-icon c-icon--18",
        "symbol": "ic_close_black_24px"
      }
    },
    {
      "text": "Voli con scalo",
      "chip-icon": {
        "class": "c-icon c-icon--18",
        "symbol": "ic_close_black_24px"
      }
    },
    {
      "text": "Alitalia",
      "chip-icon": {
        "class": "c-icon c-icon--18",
        "symbol": "ic_close_black_24px"
      }
    }
  ],
  "reset-filters-btn": {
    "modifier": "c-button--as-link",
    "type": "button",
    "text": "Azzera tutti i filtri"
  }
}
  • Content: 
    /*------------------------------------*
  Modifier: c-chips--filters
*------------------------------------*/
.c-chips--filters {
  grid-column: main;
  
  .c-chips__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: remify(16px);
  }
  
  .c-button {
    color: primary(night, 120);
    font-weight: fw(semibold);
    @include font-scale(level-1-5);
  }

  .c-chips__list-item--reset {
    display: none;
    
    @include min-screen(bp(desktop)) {
      display: block;
    }
  }

}
  • URL: /components/raw/chips/_chips.scss
  • Filesystem Path: src/views/03-organisms/chips/_chips.scss
  • Size: 515 Bytes

No notes defined.