Stylebook

Fotogalerie

4

        {% include "@Components/sections/re-agency-gallery-section/re-agency-gallery-section.twig" with { props: {
  title: "Fotogalerie",
  perex: "",
  headinglevel: "2",
  variant: "left",
  number: 4,
  items: [
    {
        src: "images/examples/2gDwlIim3Uw-312x312.jpeg",
        srcset: [
          "images/examples/2gDwlIim3Uw-312x312.jpeg 1x",
        ],
        alt: "alt of image",
        ratio: "1-1",
        href: "images/examples/FV3GConVSss-1356x904.jpeg"
    },
    {
        src: "images/examples/AQl-J19ocWE-312x312.jpeg",
        srcset: [
        "images/examples/AQl-J19ocWE-312x312.jpeg 1x",
    ],
        alt: "alt of image",
        ratio: "1-1",
        href: "images/examples/FV3GConVSss-1356x904.jpeg"
    },
    {
      src: "images/examples/2gDwlIim3Uw-312x312.jpeg",
      srcset: [
      "images/examples/2gDwlIim3Uw-312x312.jpeg 1x",
    ],
      alt: "alt of image",
      ratio: "1-1",
        href: "images/examples/FV3GConVSss-1356x904.jpeg"
    },
    {
      src: "images/examples/AQl-J19ocWE-312x312.jpeg",
      srcset: [
      "images/examples/AQl-J19ocWE-312x312.jpeg 1x",
    ],
      alt: "alt of image",
      ratio: "1-1",
        href: "images/examples/FV3GConVSss-1356x904.jpeg"
    }]
  }
} %}

          



<section class="base-section  --spacing-md    s-re-agency-gallery-slide">
  <div class="base-section__container container">
    
        <header class="base-header --left   --size-md">

	
			<div class="base-header__heading-wrapper">
					<h2 class="base-header__heading base-h2">Fotogalerie</h2>
					<div class="base-header__number">4</div>
			
		</div>
	









































	</header>
        <div class="s-re-agency-gallery-slider__container">

            <div class="swiper s-re-agency-gallery-slide__slider">
  <div class="swiper-wrapper">
                  <div class="swiper-slide s-re-agency-gallery-slide__item  swiper-slide__base-1" >
                      <article class="i-re-agency-gallery">
  <div class="i-re-agency-gallery__wrapper">
    <div class="i-re-agency-gallery__image">
      <a href="images/examples/FV3GConVSss-1356x904.jpeg" data-fancybox="re-agency-gallery" data-caption="alt of image" class="gallery-item">
        <div class="img  --ratio-1-1">
      <picture>
    
    <img src="" data-src="images/examples/2gDwlIim3Uw-312x312.jpeg" alt="alt of image" draggable="false" srcset="" data-srcset="images/examples/2gDwlIim3Uw-312x312.jpeg 1x">
  </picture>
</div>
      </a>
    </div>
  </div>
</article>
                                </div>
              <div class="swiper-slide s-re-agency-gallery-slide__item  swiper-slide__base-2" >
                      <article class="i-re-agency-gallery">
  <div class="i-re-agency-gallery__wrapper">
    <div class="i-re-agency-gallery__image">
      <a href="images/examples/FV3GConVSss-1356x904.jpeg" data-fancybox="re-agency-gallery" data-caption="alt of image" class="gallery-item">
        <div class="img  --ratio-1-1">
      <picture>
    
    <img src="" data-src="images/examples/AQl-J19ocWE-312x312.jpeg" alt="alt of image" draggable="false" srcset="" data-srcset="images/examples/AQl-J19ocWE-312x312.jpeg 1x">
  </picture>
</div>
      </a>
    </div>
  </div>
</article>
                                </div>
              <div class="swiper-slide s-re-agency-gallery-slide__item  swiper-slide__base-3" >
                      <article class="i-re-agency-gallery">
  <div class="i-re-agency-gallery__wrapper">
    <div class="i-re-agency-gallery__image">
      <a href="images/examples/FV3GConVSss-1356x904.jpeg" data-fancybox="re-agency-gallery" data-caption="alt of image" class="gallery-item">
        <div class="img  --ratio-1-1">
      <picture>
    
    <img src="" data-src="images/examples/2gDwlIim3Uw-312x312.jpeg" alt="alt of image" draggable="false" srcset="" data-srcset="images/examples/2gDwlIim3Uw-312x312.jpeg 1x">
  </picture>
</div>
      </a>
    </div>
  </div>
</article>
                                </div>
              <div class="swiper-slide s-re-agency-gallery-slide__item  swiper-slide__base-4" >
                      <article class="i-re-agency-gallery">
  <div class="i-re-agency-gallery__wrapper">
    <div class="i-re-agency-gallery__image">
      <a href="images/examples/FV3GConVSss-1356x904.jpeg" data-fancybox="re-agency-gallery" data-caption="alt of image" class="gallery-item">
        <div class="img  --ratio-1-1">
      <picture>
    
    <img src="" data-src="images/examples/AQl-J19ocWE-312x312.jpeg" alt="alt of image" draggable="false" srcset="" data-srcset="images/examples/AQl-J19ocWE-312x312.jpeg 1x">
  </picture>
</div>
      </a>
    </div>
  </div>
</article>
                                </div>
            </div>

                      <div class="s-re-agency-detail-branches__bottom-wrapper">
                        <a class="link --black" href="#">
    </a>
                        <div class="swiper-arrows">

    <div class="swiper-arrows__arrow swiper-button-prev">
        <span class="icon">
      <img src="images/svg/arrow-small-left-white.svg"  loading="lazy">
  
  </span>
    </div>

    <div class="swiper-arrows__arrow swiper-button-next">
        <span class="icon">
      <img src="images/svg/arrow-small-right-white.svg" alt="Další" loading="lazy">
  
  </span>
    </div>
</div>
                    </div>
                </div>

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

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "perex": {
      "type": "string",
      "description": "Perex of the component"
    },
    "variant": {
      "type": "string",
      "description": "left | center(default)"
    },
    "headingLevel": {
      "type": "number",
      "description": "heading level | 2(default)"
    },
    "items": {
      "type": "array of objects",
      "description": "All props are documented by the component `estate-slide-item`."
    }
  }
}