Aeroporto di Bologna - Design System

Launches: Simple 

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

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

            <h2 class="c-launch__title">
                Accompagni qualcuno?
            </h2>

            Per te, 10 minuti di sosta gratuita con il Kiss&Fly

            Con l’area “Kiss & Fly” se accompagni o vieni a riprendere qualcuno in aeroporto hai <strong>10 minuti di sosta gratuita!</strong>

            <a href="#" class="">Scopri di più</a>

        </div>

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

            <h2 class="c-launch__title">
                Accompagni qualcuno?
            </h2>

            Per te, 10 minuti di sosta gratuita con il Kiss&Fly

            Con l’area “Kiss & Fly” se accompagni o vieni a riprendere qualcuno in aeroporto hai <strong>10 minuti di sosta gratuita!</strong>

            <a href="#" class="">Scopri di più</a>

        </div>

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

            <h2 class="c-launch__title">
                Accompagni qualcuno?
            </h2>

            Per te, 10 minuti di sosta gratuita con il Kiss&Fly

            Con l’area “Kiss & Fly” se accompagni o vieni a riprendere qualcuno in aeroporto hai <strong>10 minuti di sosta gratuita!</strong>

            <a href="#" class="">Scopri di più</a>

        </div>

    </li>

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

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

</ul>
 
{
  "aria-label-title": "Scopri di più sui parcheggi",
  "items": [
    {
      "title": {
        "tag": "h2",
        "text": "Accompagni qualcuno?"
      },
      "subtitle": "Per te, 10 minuti di sosta gratuita con il Kiss&Fly",
      "body": "Con l’area “Kiss & Fly” se accompagni o vieni a riprendere qualcuno in aeroporto hai <strong>10 minuti di sosta gratuita!</strong>",
      "url": "#",
      "caption": "Scopri di più"
    },
    {
      "title": {
        "tag": "h2",
        "text": "Accompagni qualcuno?"
      },
      "subtitle": "Per te, 10 minuti di sosta gratuita con il Kiss&Fly",
      "body": "Con l’area “Kiss & Fly” se accompagni o vieni a riprendere qualcuno in aeroporto hai <strong>10 minuti di sosta gratuita!</strong>",
      "url": "#",
      "caption": "Scopri di più"
    },
    {
      "title": {
        "tag": "h2",
        "text": "Accompagni qualcuno?"
      },
      "subtitle": "Per te, 10 minuti di sosta gratuita con il Kiss&Fly",
      "body": "Con l’area “Kiss & Fly” se accompagni o vieni a riprendere qualcuno in aeroporto hai <strong>10 minuti di sosta gratuita!</strong>",
      "url": "#",
      "caption": "Scopri di più"
    }
  ]
}
  • 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.