Aeroporto di Bologna - Design System

Destinations 

<div class="c-destinations">

    <div class="c-destinations__list">
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <span class="c-rounded-label " aria-label="">

                    <span class="icon" aria-hidden="true">&#x2605;</span> <strong>Novità</strong>
                </span>
                <div class="c-launch__image">
                    <img src="../../images/destinations/amman.jpg" alt="Amman" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Amman</a>
                </p>

            </div>
        </div>
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <div class="c-launch__image">
                    <img src="../../images/destinations/amsterdam.jpg" alt="Amsterdam" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Amsterdam</a>
                </p>

            </div>
        </div>
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <div class="c-launch__image">
                    <img src="../../images/destinations/boa-vista.jpg" alt="Boa Vista" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Boa Vista</a>
                </p>

            </div>
        </div>
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <div class="c-launch__image">
                    <img src="../../images/destinations/catania.jpg" alt="Catania" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Catania</a>
                </p>

            </div>
        </div>
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <div class="c-launch__image">
                    <img src="../../images/destinations/kiev.jpg" alt="Kiev" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Kiev</a>
                </p>

            </div>
        </div>
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <span class="c-rounded-label " aria-label="">

                    <span class="icon" aria-hidden="true">&#x2605;</span> <strong>Novità</strong>
                </span>
                <div class="c-launch__image">
                    <img src="../../images/destinations/samara.jpg" alt="Samara" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Samara</a>
                </p>

            </div>
        </div>
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <div class="c-launch__image">
                    <img src="../../images/destinations/amman.jpg" alt="Amman" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Amman</a>
                </p>

            </div>
        </div>
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <div class="c-launch__image">
                    <img src="../../images/destinations/amsterdam.jpg" alt="Amsterdam" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Amsterdam</a>
                </p>

            </div>
        </div>
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <div class="c-launch__image">
                    <img src="../../images/destinations/boa-vista.jpg" alt="Boa Vista" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Boa Vista</a>
                </p>

            </div>
        </div>
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <div class="c-launch__image">
                    <img src="../../images/destinations/catania.jpg" alt="Catania" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Catania</a>
                </p>

            </div>
        </div>
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <span class="c-rounded-label " aria-label="">

                    <span class="icon" aria-hidden="true">&#x2605;</span> <strong>Novità</strong>
                </span>
                <div class="c-launch__image">
                    <img src="../../images/destinations/kiev.jpg" alt="Kiev" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Kiev</a>
                </p>

            </div>
        </div>
        <div class="c-destinations__item">
            <div class="c-launch c-launch--showcase">

                <div class="c-launch__image">
                    <img src="../../images/destinations/samara.jpg" alt="Samara" />
                </div>

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

                <p class="c-launch__caption">
                    <a href="">Samara</a>
                </p>

            </div>
        </div>
    </div>

</div>
 
<div class="c-destinations">

  <div class="c-destinations__list">
    {{#each items}}
    <div class="c-destinations__item">
      {{> @launch--default }}
    </div>
    {{/each}}
  </div>

</div>
 
{
  "items": [
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/amman.jpg",
      "label": "Giordania",
      "caption": "Amman",
      "rounded-label": {
        "text": "<span class=\"icon\" aria-hidden=\"true\">&#x2605;</span> <strong>Novità</strong>"
      }
    },
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/amsterdam.jpg",
      "label": "Paesi Bassi",
      "caption": "Amsterdam"
    },
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/boa-vista.jpg",
      "label": "Portogallo",
      "caption": "Boa Vista"
    },
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/catania.jpg",
      "label": "Italia",
      "caption": "Catania"
    },
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/kiev.jpg",
      "label": "Ucraina",
      "caption": "Kiev"
    },
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/samara.jpg",
      "label": "Russia",
      "caption": "Samara",
      "rounded-label": {
        "text": "<span class=\"icon\" aria-hidden=\"true\">&#x2605;</span> <strong>Novità</strong>"
      }
    },
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/amman.jpg",
      "label": "Giordania",
      "caption": "Amman"
    },
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/amsterdam.jpg",
      "label": "Paesi Bassi",
      "caption": "Amsterdam"
    },
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/boa-vista.jpg",
      "label": "Portogallo",
      "caption": "Boa Vista"
    },
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/catania.jpg",
      "label": "Italia",
      "caption": "Catania"
    },
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/kiev.jpg",
      "label": "Ucraina",
      "caption": "Kiev",
      "rounded-label": {
        "text": "<span class=\"icon\" aria-hidden=\"true\">&#x2605;</span> <strong>Novità</strong>"
      }
    },
    {
      "modifier": "c-launch--showcase",
      "bg-path": "/images/destinations/samara.jpg",
      "label": "Russia",
      "caption": "Samara"
    }
  ]
}
  • Content: 
    .c-destinations {

  main & {
    grid-column: main;
  }

}

.c-destinations__list {
  display: flex;
  flex-wrap: wrap;

  @supports (display: grid) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: remify(16px);

    @include min-screen(bp(tablet)) {
      grid-template-columns: 1fr 1fr 1fr;
    }

    @include min-screen(bp(desktop)) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }

}

.c-destinations__item {
  flex: 1 1 50%;
  padding-right: remify(16px);
  margin-bottom: remify(16px);

  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles */
    box-shadow: none;
  }

  @include min-screen(bp(tablet)) {
    flex: 1 1 32%;
  }

  @supports (display: grid) {
    flex: initial;
    padding-right: initial;
    margin-bottom: initial;
  }

}
  • URL: /components/raw/destinations/_destinations.scss
  • Filesystem Path: src/views/03-organisms/destinations/_destinations.scss
  • Size: 825 Bytes

No notes defined.