Aeroporto di Bologna - Design System

Launches: Retail 

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

    <li class="c-launches__item">
        <div class="c-retail ">
            <img src="https://picsum.photos/640/480" alt="" class="c-retail__image u-OF-cover">
            <div class="c-retail__body">
                <p class="c-retail__title">Deposito bagagli</p>
                <p class="c-retail__description"><strong>1° piano</strong> - Dopo la security</p>
                <a href="#">Scopri di più &#x2192;</a>
            </div>
        </div>
    </li>
    <li class="c-launches__item">
        <div class="c-retail ">
            <img src="https://picsum.photos/640/480" alt="" class="c-retail__image u-OF-cover">
            <div class="c-retail__body">
                <div class="c-retail__logo">
                    <img src="http://via.placeholder.com/140x80?text&#x3D;Logo+negozio" alt="Ferrari" class="u-OF-contain">
                </div>
                <p class="c-retail__title">Deposito bagagli</p>
                <p class="c-retail__description"><strong>1° piano</strong> - Dopo la security</p>
                <a href="#">Scopri di più &#x2192;</a>
            </div>
        </div>
    </li>
    <li class="c-launches__item">
        <div class="c-retail ">
            <img src="https://picsum.photos/640/480" alt="" class="c-retail__image u-OF-cover">
            <div class="c-retail__body">
                <p class="c-retail__title">Deposito bagagli</p>
                <p class="c-retail__description"><strong>1° piano</strong> - Dopo la security</p>
                <a href="#">Scopri di più &#x2192;</a>
            </div>
        </div>
    </li>

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

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

</ul>
 
{
  "aria-label-title": "Scopri di più sui parcheggi",
  "items": [
    {
      "img": {
        "src": "https://picsum.photos/640/480",
        "alt": ""
      },
      "title": "Deposito bagagli",
      "description": "<strong>1° piano</strong> - Dopo la security",
      "anchor": {
        "url": "#",
        "text": "Scopri di più &#x2192;"
      }
    },
    {
      "img": {
        "src": "https://picsum.photos/640/480",
        "alt": ""
      },
      "logo": {
        "src": "http://via.placeholder.com/140x80?text=Logo+negozio",
        "alt": "Ferrari"
      },
      "title": "Deposito bagagli",
      "description": "<strong>1° piano</strong> - Dopo la security",
      "anchor": {
        "url": "#",
        "text": "Scopri di più &#x2192;"
      }
    },
    {
      "img": {
        "src": "https://picsum.photos/640/480",
        "alt": ""
      },
      "title": "Deposito bagagli",
      "description": "<strong>1° piano</strong> - Dopo la security",
      "anchor": {
        "url": "#",
        "text": "Scopri di più &#x2192;"
      }
    }
  ]
}
  • 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.