Stylebook

Nemovitosti, které u nás najdete jsou od spolehlivých a lety prověřených realitních kanceláří.

Prohlédněte si jejich profily a vyberte toho správného partnera pro důležité rozhodnutí
Zjistit více

        {% include "@Components/sections/real-estate-section/real-estate-section.twig" with { props: {
  title: "Real estate section title",
  perex: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?",
  content: {
    subheading: "Nemovitosti, které u nás najdete jsou od spolehlivých a lety prověřených realitních kanceláří.",
    perex: "Prohlédněte si jejich profily a vyberte toho správného partnera pro důležité rozhodnutí"
  },
  images: [
    {
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },{
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },
    {
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },{
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },
    {
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },{
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    }
  ],
  button: {
    title: "Zjistit více",
    variant:"outline",
    url: "https://www.google.com/",
  }
}} %}

          



	




<section class="base-section      s-real-estate">
  <div class="base-section__container container">
    
		<header class="base-header">

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









































	</header>		<div class="s-real-estate__content-block">

							<div class="s-real-estate__content">
					<h3
							class="s-real-estate__subheading base-h2">Nemovitosti, které u nás najdete jsou od spolehlivých a lety prověřených realitních kanceláří.</h3>
					<p class="s-real-estate__perex base-h4">Prohlédněte si jejich profily a vyberte toho správného partnera pro důležité rozhodnutí</p>
				</div>
			
			  <ul class="g-real-estate">
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
      </ul>
		</div>

					<div class="g-buttons g-base  --left --mobile-center">
  
					<a class="btn --outline           s-real-estate__button" href='https://www.google.com/'>    <span class="btn__title ">Zjistit více</span>
      </a>

				</div>
		
		<div class="s-real-estate__decor-img">
			<div class="img">
      <picture>
    
    <img src="images/svg/real-estate-section-decor-img.svg" alt="Decor" loading="lazy" draggable="false">
  </picture>
</div>
		</div>
	  </div>
</section>

Zjistit více

        {% include "@Components/sections/real-estate-section/real-estate-section.twig" with { props: {
  title: "Real estate section title",
  perex: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?",
  images: [
    {
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },{
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },
    {
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },{
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },
    {
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },{
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },
    {
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },
    {
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },
    {
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    },
    {
      src: "images/examples/FV3GConVSss-200x107.jpeg",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["images/examples/FV3GConVSss-200x107.jpeg 1x", "images/examples/FV3GConVSss-400x214.jpeg 2x"]
    }
  ],
  button: {
    title: "Zjistit více",
    variant:"outline",
    url: "https://www.google.com/",
  }
}} %}

          








<section class="base-section      s-real-estate s-real-estate__only-images">
  <div class="base-section__container container">
    
		<header class="base-header">

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









































	</header>		<div class="s-real-estate__content-block">

			
			  <ul class="g-real-estate">
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
          <li class="g-real-estate__item">
        <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-200x107.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-200x107.jpeg 1x, images/examples/FV3GConVSss-400x214.jpeg 2x">
  </picture>
</div>
      </li>
      </ul>
		</div>

					<div class="g-buttons g-base  --left --mobile-center">
  
					<a class="btn --outline           s-real-estate__button" href='https://www.google.com/'>    <span class="btn__title ">Zjistit více</span>
      </a>

				</div>
		
		<div class="s-real-estate__decor-img">
			<div class="img">
      <picture>
    
    <img src="images/svg/real-estate-section-decor-img.svg" alt="Decor" loading="lazy" draggable="false">
  </picture>
</div>
		</div>
	  </div>
</section>

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "perex": {
      "type": "string",
      "description": "Perex of the component"
    },
    "content": {
      "subheading": {
        "type": "string",
        "description": "Subheading of the component"
      },
      "perex": {
        "type": "string",
        "description": "Perex of the content of component"
      }
    },
    "images": {
      "type": "group",
      "description": "Same as images"
    },
    "button": {
      "type": "group",
      "description": "Same as button"
    }
  }
}