Grupa zdjęć(ang. Image Group)

Grupa zdjęć to komponent, który pozwala na dodanie jednocześnie kilku zdjęć na stronę. Tworzą one wówczas zamkniętą kompozycję, która może być używana w celu urozmaicenia układu.


<div class="image-group-2">
  <div
    style="background-image: url('/ui-dev/img/img-placeholder.jpg')"
    class="image-1 image"
  ></div>
  <div
    style="background-image: url('/ui-dev/img/img-placeholder_2.jpg')"
    class="image-2 image"
  ></div>
</div>

  1. Zdjęcia

    Komponent zawiera w sobie odpowiednie odległości między zdjęciami.

Komponent nie jest klikalny.

Warianty

Dwa zdjęcia


<div class="image-group-2">
  <div
    style="background-image: url('/ui-dev/img/img-placeholder.jpg')"
    class="image-1 image"
  ></div>
  <div
    style="background-image: url('/ui-dev/img/img-placeholder_2.jpg')"
    class="image-2 image"
  ></div>
</div>

Trzy zdjęcia — duże zdjęcie pionowe po lewej stronie


<div class="image-group-3--big-left">
  <div
    style="background-image: url('/ui-dev/img/img-placeholder.jpg')"
    class="image-1 image"
  ></div>
  <div
    style="background-image: url('/ui-dev/img/img-placeholder_2.jpg')"
    class="image-2 image"
  ></div>
  <div
    style="background-image: url('/ui-dev/img/img-placeholder_3.jpg')"
    class="image-3 image"
  ></div>
</div>

Trzy zdjęcia – duże zdjęcie pionowe po prawej stronie


<div class="image-group-3--big-right">
  <div
    style="background-image: url('/ui-dev/img/img-placeholder.jpg')"
    class="image-1 image"
  ></div>
  <div
    style="background-image: url('/ui-dev/img/img-placeholder_2.jpg')"
    class="image-2 image"
  ></div>
  <div
    style="background-image: url('/ui-dev/img/img-placeholder_3.jpg')"
    class="image-3 image"
  ></div>
</div>

Zasady stosowania

Profesjonalne, dobrej jakości zdjęcia

Zdjęcia należy dobrać zgodnie z zasadami doboru zdjęć.

Niepoprawne odległości

Nie należy zmieniać odległości pomiędzy zdjęciami.