Stylebook

Real estate section title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?
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: "https://source.unsplash.com/FV3GConVSss/200x107",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["https://source.unsplash.com/FV3GConVSss/200x107 1x", "https://source.unsplash.com/FV3GConVSss/400x214 2x"]
    },{
      src: "https://source.unsplash.com/FV3GConVSss/200x107",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["https://source.unsplash.com/FV3GConVSss/200x107 1x", "https://source.unsplash.com/FV3GConVSss/400x214 2x"]
    },
    {
      src: "https://source.unsplash.com/FV3GConVSss/200x107",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["https://source.unsplash.com/FV3GConVSss/200x107 1x", "https://source.unsplash.com/FV3GConVSss/400x214 2x"]
    },{
      src: "https://source.unsplash.com/FV3GConVSss/200x107",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["https://source.unsplash.com/FV3GConVSss/200x107 1x", "https://source.unsplash.com/FV3GConVSss/400x214 2x"]
    },
    {
      src: "https://source.unsplash.com/FV3GConVSss/200x107",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["https://source.unsplash.com/FV3GConVSss/200x107 1x", "https://source.unsplash.com/FV3GConVSss/400x214 2x"]
    },{
      src: "https://source.unsplash.com/FV3GConVSss/200x107",
      alt: "alt of image",
      nativeLazyload: true,
      srcset: ["https://source.unsplash.com/FV3GConVSss/200x107 1x", "https://source.unsplash.com/FV3GConVSss/400x214 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 --left">
      <h2 class="base-header__heading base-h1">Real estate section title</h2>
        <p class="base-header__paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?</p>
  </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="https://source.unsplash.com/FV3GConVSss/200x107" alt="alt of image" loading="lazy" draggable="false" srcset="https://source.unsplash.com/FV3GConVSss/200x107 1x, https://source.unsplash.com/FV3GConVSss/400x214 2x">
  </picture>
</div>
    </li>
      <li class="g-real-estate__item">
      <div class="img">
  <picture>
    
    <img src="https://source.unsplash.com/FV3GConVSss/200x107" alt="alt of image" loading="lazy" draggable="false" srcset="https://source.unsplash.com/FV3GConVSss/200x107 1x, https://source.unsplash.com/FV3GConVSss/400x214 2x">
  </picture>
</div>
    </li>
      <li class="g-real-estate__item">
      <div class="img">
  <picture>
    
    <img src="https://source.unsplash.com/FV3GConVSss/200x107" alt="alt of image" loading="lazy" draggable="false" srcset="https://source.unsplash.com/FV3GConVSss/200x107 1x, https://source.unsplash.com/FV3GConVSss/400x214 2x">
  </picture>
</div>
    </li>
      <li class="g-real-estate__item">
      <div class="img">
  <picture>
    
    <img src="https://source.unsplash.com/FV3GConVSss/200x107" alt="alt of image" loading="lazy" draggable="false" srcset="https://source.unsplash.com/FV3GConVSss/200x107 1x, https://source.unsplash.com/FV3GConVSss/400x214 2x">
  </picture>
</div>
    </li>
      <li class="g-real-estate__item">
      <div class="img">
  <picture>
    
    <img src="https://source.unsplash.com/FV3GConVSss/200x107" alt="alt of image" loading="lazy" draggable="false" srcset="https://source.unsplash.com/FV3GConVSss/200x107 1x, https://source.unsplash.com/FV3GConVSss/400x214 2x">
  </picture>
</div>
    </li>
      <li class="g-real-estate__item">
      <div class="img">
  <picture>
    
    <img src="https://source.unsplash.com/FV3GConVSss/200x107" alt="alt of image" loading="lazy" draggable="false" srcset="https://source.unsplash.com/FV3GConVSss/200x107 1x, https://source.unsplash.com/FV3GConVSss/400x214 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="" 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"
    }
  }
}