Aeroporto di Bologna - Design System

Launches 

<ul class="c-launches" aria-label="Scopri di più sui parcheggi">

    <li class="c-launches__item">
        <div class="c-launch ">

            <div class="c-launch__image">
                <img src="../../images/launch-where-to-pay.jpg" alt="Come e dove pagare" />
            </div>

            <p class="c-launch__label" aria-hidden="true">
                Parcheggi
            </p>

            <p class="c-launch__caption">
                <a href="/components/preview/page-parkings-home">Come e dove pagare</a>
            </p>

        </div>
    </li>
    <li class="c-launches__item">
        <div class="c-launch ">

            <div class="c-launch__image">
                <img src="../../images/launch-waiting.jpg" alt="Sostare in aeroporto" />
            </div>

            <p class="c-launch__label" aria-hidden="true">
                Parcheggi
            </p>

            <p class="c-launch__caption">
                <a href="/components/preview/page-meet-greet">Sostare in aeroporto</a>
            </p>

        </div>
    </li>
    <li class="c-launches__item">
        <div class="c-launch ">

            <div class="c-launch__image">
                <img src="../../images/launch-parking-map.jpg" alt="Guarda la mappa" />
            </div>

            <p class="c-launch__label" aria-hidden="true">
                Parcheggi
            </p>

            <p class="c-launch__caption">
                <a href="">Guarda la mappa</a>
            </p>

        </div>
    </li>

</ul>
 
<ul class="c-launches" aria-label="{{ aria-label-title }}">

  {{#each items}}
    <li class="c-launches__item">
      {{> @launch }}
    </li>
  {{/each}}

</ul>
 
{
  "aria-label-title": "Scopri di più sui parcheggi",
  "items": [
    {
      "bg-path": "/images/launch-where-to-pay.jpg",
      "label": "Parcheggi",
      "url": "/components/preview/page-parkings-home",
      "caption": "Come e dove pagare"
    },
    {
      "bg-path": "/images/launch-waiting.jpg",
      "label": "Parcheggi",
      "url": "/components/preview/page-meet-greet",
      "caption": "Sostare in aeroporto"
    },
    {
      "bg-path": "/images/launch-parking-map.jpg",
      "label": "Parcheggi",
      "caption": "Guarda la mappa"
    }
  ]
}
  • Content: 
    .c-launches {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: remify(-16px);

  @supports (display: grid) {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
    grid-column-gap: remify(16px);
    grid-row-gap: remify(16px);

    flex-wrap: initial;
    justify-content: center;
    margin-right: 0;

  }

  main & {
    grid-column: main;
  }

  .c-main--parking-info-home & {
    margin-top: remify(48px);

    @include min-screen( bp(tablet) ) {
      margin-top: remify(64px);
    }

  }

}

.c-launches__item {
  flex: 1 1 remify(360px);
  
  @supports (display: grid) {
    flex: initial;
  }
}


/*------------------------------------*\
  Modifiers
\*------------------------------------*/

.c-main--arrivals-departures .c-launches {
  margin-top: remify(64px);
}
  • URL: /components/raw/launches/_launches.scss
  • Filesystem Path: src/views/02-molecules/launches/_launches.scss
  • Size: 844 Bytes

No notes defined.