Aeroporto di Bologna - Design System

Mosaic Gallery 

<div class="c-mosaic-gallery ">

    <div class="c-mosaic-gallery__grid">
        <div class="c-mosaic-gallery__grid-item main">
            <a href="#mosaic-gallery-img-1" class="js-fr-dialogmodal-open" aria-controls="dialog-gallery">
                <img src="https://images.unsplash.com/photo-1620146596504-95527348e0ac?q&#x3D;80&amp;w&#x3D;3540&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;ixlib&#x3D;rb-4.0.3&amp;ixid&#x3D;M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
            </a>
        </div>
        <div class="c-mosaic-gallery__grid-item">
            <a href="#mosaic-gallery-img-2" class="js-fr-dialogmodal-open" aria-controls="dialog-gallery">
                <img src="https://images.unsplash.com/photo-1542296332-2e4473faf563?q&#x3D;80&amp;w&#x3D;3540&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;ixlib&#x3D;rb-4.0.3&amp;ixid&#x3D;M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
            </a>
        </div>
        <div class="c-mosaic-gallery__grid-item">
            <a href="#mosaic-gallery-img-3" class="js-fr-dialogmodal-open" aria-controls="dialog-gallery">
                <img src="https://images.unsplash.com/photo-1627750673161-02af15c7c722?q&#x3D;80&amp;w&#x3D;3540&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;ixlib&#x3D;rb-4.0.3&amp;ixid&#x3D;M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
            </a>
        </div>
        <div class="c-mosaic-gallery__grid-item">
            <a href="#mosaic-gallery-img-4" class="js-fr-dialogmodal-open" aria-controls="dialog-gallery">
                <img src="https://images.unsplash.com/photo-1628428974294-1cf9363fe176?q&#x3D;80&amp;w&#x3D;3072&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;ixlib&#x3D;rb-4.0.3&amp;ixid&#x3D;M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
            </a>
        </div>
        <div class="c-mosaic-gallery__grid-item">
            <a href="#mosaic-gallery-img-5" class="js-fr-dialogmodal-open" aria-controls="dialog-gallery">
                <img src="https://images.unsplash.com/photo-1527007622069-3a0241e1cd8c?q&#x3D;80&amp;w&#x3D;3474&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;ixlib&#x3D;rb-4.0.3&amp;ixid&#x3D;M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
            </a>
        </div>
    </div>

    <div class="c-mosaic-gallery__btn">
        <button type="" class="c-button c-button--ghost js-fr-dialogmodal-open" aria-controls="dialog-gallery">

            Mostra tutte le foto

        </button>
    </div>

</div>

<div class="c-dialog c-dialog--gallery js-fr-dialogmodal " id="dialog-gallery">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-gallery-dialog-title">
        <div role="document">
            <p class="c-dialog__title u-visuallyhidden" id="dialog-gallery-dialog-title" aria-hidden="true">Titolo della gallery</p>
            <section class="c-carousel c-carousel--big-gallery c-carousel--autoHeight c-carousel--top-nav" aria-hidden="true">

                <div class="jsInstance owl-carousel">
                    <div class="c-carousel__item" data-hash="mosaic-gallery-img-1">
                        <img src="https://images.unsplash.com/photo-1620146596504-95527348e0ac?q&#x3D;80&amp;w&#x3D;3540&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;ixlib&#x3D;rb-4.0.3&amp;ixid&#x3D;M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                        <p class="img-desc">Image description 1</p>
                    </div>
                    <div class="c-carousel__item" data-hash="mosaic-gallery-img-2">
                        <img src="https://images.unsplash.com/photo-1542296332-2e4473faf563?q&#x3D;80&amp;w&#x3D;3540&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;ixlib&#x3D;rb-4.0.3&amp;ixid&#x3D;M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                        <p class="img-desc">Image description 2</p>
                    </div>
                    <div class="c-carousel__item" data-hash="mosaic-gallery-img-3">
                        <img src="https://images.unsplash.com/photo-1627750673161-02af15c7c722?q&#x3D;80&amp;w&#x3D;3540&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;ixlib&#x3D;rb-4.0.3&amp;ixid&#x3D;M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                        <p class="img-desc">Image description 3</p>
                    </div>
                    <div class="c-carousel__item" data-hash="mosaic-gallery-img-4">
                        <img src="https://images.unsplash.com/photo-1628428974294-1cf9363fe176?q&#x3D;80&amp;w&#x3D;3072&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;ixlib&#x3D;rb-4.0.3&amp;ixid&#x3D;M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                        <p class="img-desc">Image description 4</p>
                    </div>
                    <div class="c-carousel__item" data-hash="mosaic-gallery-img-5">
                        <img src="https://images.unsplash.com/photo-1527007622069-3a0241e1cd8c?q&#x3D;80&amp;w&#x3D;3474&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;ixlib&#x3D;rb-4.0.3&amp;ixid&#x3D;M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                        <p class="img-desc">Image description 5</p>
                    </div>
                </div>

                <div class="c-carousel__counter" id="carousel-counter"></div>

            </section> <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>
 
<div class="c-mosaic-gallery {{modifier}}">
  
  <div class="c-mosaic-gallery__grid">
    {{#each items}}
    <div class="c-mosaic-gallery__grid-item{{#if class}} {{class}}{{/if}}">
      <a href="#{{ img.hashID }}" class="js-fr-dialogmodal-open" aria-controls="dialog-gallery">
        <img src="{{img.src}}" alt="{{img.alt}}">
      </a>
    </div>
    {{/each}}
  </div>

  <div class="c-mosaic-gallery__btn">
    {{> @button show-gallery-btn }}
  </div>

</div>

{{ render "@dialog--gallery" dialog-gallery merge=true }}
 
{
  "items": [
    {
      "class": "main",
      "img": {
        "src": "https://images.unsplash.com/photo-1620146596504-95527348e0ac?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "alt": "",
        "hashID": "mosaic-gallery-img-1"
      }
    },
    {
      "img": {
        "src": "https://images.unsplash.com/photo-1542296332-2e4473faf563?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "alt": "",
        "hashID": "mosaic-gallery-img-2"
      }
    },
    {
      "img": {
        "src": "https://images.unsplash.com/photo-1627750673161-02af15c7c722?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "alt": "",
        "hashID": "mosaic-gallery-img-3"
      }
    },
    {
      "img": {
        "src": "https://images.unsplash.com/photo-1628428974294-1cf9363fe176?q=80&w=3072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "alt": "",
        "hashID": "mosaic-gallery-img-4"
      }
    },
    {
      "img": {
        "src": "https://images.unsplash.com/photo-1527007622069-3a0241e1cd8c?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "alt": "",
        "hashID": "mosaic-gallery-img-5"
      }
    }
  ],
  "show-gallery-btn": {
    "name": "default",
    "text": "Mostra tutte le foto",
    "modifier": "c-button--ghost js-fr-dialogmodal-open",
    "opens-dialog": "dialog-gallery"
  },
  "dialog-gallery": {
    "gallery": {
      "modifier": "c-carousel--autoHeight c-carousel--top-nav",
      "has-counter": true,
      "images": [
        {
          "img-path": "https://images.unsplash.com/photo-1620146596504-95527348e0ac?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
          "img-desc": "Image description 1",
          "data-hash": "mosaic-gallery-img-1"
        },
        {
          "img-path": "https://images.unsplash.com/photo-1542296332-2e4473faf563?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
          "img-desc": "Image description 2",
          "data-hash": "mosaic-gallery-img-2"
        },
        {
          "img-path": "https://images.unsplash.com/photo-1627750673161-02af15c7c722?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
          "img-desc": "Image description 3",
          "data-hash": "mosaic-gallery-img-3"
        },
        {
          "img-path": "https://images.unsplash.com/photo-1628428974294-1cf9363fe176?q=80&w=3072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
          "img-desc": "Image description 4",
          "data-hash": "mosaic-gallery-img-4"
        },
        {
          "img-path": "https://images.unsplash.com/photo-1527007622069-3a0241e1cd8c?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
          "img-desc": "Image description 5",
          "data-hash": "mosaic-gallery-img-5"
        }
      ]
    }
  }
}
  • Content: 
    .c-mosaic-gallery__grid {
  
  @include min-screen(bp(tablet)) {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, remify(200px));
  }
}

.c-mosaic-gallery__grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: remify(16px);
}

.c-mosaic-gallery__grid-item:not(.main) {
  @include max-screen(bp(tablet)) {
    display: none;
  }
}

.c-mosaic-gallery__grid-item.main {
  grid-column: span 2;
  
  @include min-screen(bp(tablet)) {
    grid-column: initial;
    grid-row: span 2;
  }
}

.c-mosaic-gallery__btn {
  margin-top: remify(16px);
  text-align: right;
}
  • URL: /components/raw/mosaic-gallery/_mosaic-gallery.scss
  • Filesystem Path: src/views/03-organisms/mosaic-gallery/_mosaic-gallery.scss
  • Size: 654 Bytes

No notes defined.