Aeroporto di Bologna - Design System

Skimming 

<div class="c-skimming" grid="grid">
    <div grid="12 6@md 3@xl last@xl">
        <div class="c-multiselect c-form ">

            <button type="button" class="c-multiselect__button js-toggleMultiSelectBtn" aria-expanded="false" aria-label="Seleziona le compagnie aeree" aria-controls="aria-MultiSelectOptions">
                <span>Tutte le compagnie aeree</span>
                <img src="../../images/svgs/arrow-down-blue.svg" aria-hidden="true" alt="">
            </button>

            <div class="c-multiselect__options js-multiselectOptions" role="region" aria-live="polite" id="aria-MultiSelectOptions">
                <input type="checkbox" id="alitalia" name="alitalia" class="u-visuallyhidden " role="group" aria-label="alitalia">

                <label for="alitalia" class="">
                    Alitalia
                </label> <input type="checkbox" id="ryanair" name="ryanair" class="u-visuallyhidden " role="group" aria-label="ryanair">

                <label for="ryanair" class="">
                    Ryanair
                </label> <input type="checkbox" id="emirates" name="emirates" class="u-visuallyhidden " role="group" aria-label="emirates">

                <label for="emirates" class="">
                    Emirates
                </label> <input type="checkbox" id="klm" name="kml" class="u-visuallyhidden " role="group" aria-label="klm">

                <label for="klm" class="">
                    KLM
                </label> <input type="checkbox" id="delta" name="delta" class="u-visuallyhidden " role="group" aria-label="delta">

                <label for="delta" class="">
                    Delta Airlines
                </label> <input type="checkbox" id="lufthansa" name="lufthansa" class="u-visuallyhidden " role="group" aria-label="lufthansa">

                <label for="lufthansa" class="">
                    Lufthansa
                </label> <input type="checkbox" id="airdolomiti" name="airdolomiti" class="u-visuallyhidden " role="group" aria-label="airdolomiti">

                <label for="airdolomiti" class="">
                    Air Dolomiti
                </label>
            </div>

        </div>
    </div>
    <div grid="12 6@md 4@xl first@md">
        <ul class="c-switcher" aria-label="Cerca tra le seguenti sezioni">

            <li class="is-active">
                <a href="#">Tutti i risultati </a>
            </li>
            <li>
                <a href="#">Voli diretti </a>
            </li>
            <li>
                <a href="#">Con scalo </a>
            </li>

        </ul>
    </div>
    <div grid="12 5@xl">
        <div class=''>
            <ul class='c-switcher'>
                <li>
                    <a href='#section-cheaper' aria-label='Risultati ordinati per prezzo crescente'>
                        Il volo più economico
                        <strong>
                            129,90 €
                        </strong>
                    </a>
                </li>
                <li>
                    <a href='#section-quickest' aria-label='Risultati ordinati per durata del volo crescente'>
                        Il volo più veloce
                        <strong>
                            3h 56'
                        </strong>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
 
<div class="c-skimming" grid="grid">
  <div grid="12 6@md 3@xl last@xl">{{> @multiselect multiselect-company }}</div>
  <div grid="12 6@md 4@xl first@md">{{> @switcher switcher }}</div>
  <div grid="12 5@xl">{{> @tablist--flights-list-toggle }}</div>
</div>
 
{
  "switcher": {
    "aria-label": "Cerca tra le seguenti sezioni",
    "items": [
      {
        "section": "Tutti i risultati",
        "number": "",
        "class": "is-active"
      },
      {
        "section": "Voli diretti",
        "number": ""
      },
      {
        "section": "Con scalo",
        "number": ""
      }
    ]
  },
  "ecofast": {
    "aria-label": "Cerca tra le seguenti sezioni",
    "items": [
      {
        "section": "Volo economico",
        "number": "129,90 €",
        "class": "is-active"
      },
      {
        "section": "Volo più veloce",
        "number": "3h 56'"
      }
    ]
  },
  "multiselect-company": {
    "exposed-text": "Tutte le compagnie aeree",
    "aria-label": "Seleziona le compagnie aeree",
    "options": [
      {
        "id": "alitalia",
        "name": "alitalia",
        "text": "Alitalia"
      },
      {
        "id": "ryanair",
        "name": "ryanair",
        "text": "Ryanair"
      },
      {
        "id": "emirates",
        "name": "emirates",
        "text": "Emirates"
      },
      {
        "id": "klm",
        "name": "kml",
        "text": "KLM"
      },
      {
        "id": "delta",
        "name": "delta",
        "text": "Delta Airlines"
      },
      {
        "id": "lufthansa",
        "name": "lufthansa",
        "text": "Lufthansa"
      },
      {
        "id": "airdolomiti",
        "name": "airdolomiti",
        "text": "Air Dolomiti"
      }
    ]
  }
}
  • Content: 
    .c-skimming {
  padding: remify(16px);

  @include min-screen(bp(tablet-p)) {
    display: flex;
    justify-content: space-between;
    margin: remify(32px) 0 0;
    padding: remify(16px) 0;
  }

  main & {
    grid-column: main;
  }

}
  • URL: /components/raw/skimming/_skimming.scss
  • Filesystem Path: src/views/03-organisms/skimming/_skimming.scss
  • Size: 238 Bytes

No notes defined.