Overview item

Default 

  •         {% include "@Components/items/estate-slide-item/estate-slide-item.twig" with {
  props: {
    img: {
        src: "images/examples/fashion-312x312.jpeg",
        nativeLazyload: true,
        srcset: [
          "images/examples/FV3GConVSss-312x312.jpeg 1x",
          "images/examples/FV3GConVSss-624x624.jpeg 2x"
        ],
        alt: "alt of image",
        ratio: "1-1"
      },
      overview: {
        threeDimensioinal: true,
        video: true,
        photo: {
          count: "7"
          }
      },
      badges: [
        {
          title: "Nový",
          variant: "circle"
        },
        {
          variant: "circle",
          color: "yellow",
          title: "Top"
        }
      ],
      ctaButton: {
        tag: "button",
        tooltip:"Do oblíbených",
        icon: {
          path: "images/svg/favorite.svg",
        }
      },
      headinglevel: "3",
      href: "#",
      title: "Aparózo Aparózo Aparózo Aparózo",
      price: {
        value: "8 850 000",
        currency: "Kč"
      },
      location: "Kostelní 19, České Budějovice"
  }
} %}

      
  •           

<article class="i-estate-slide">

  <div class="i-estate-slide__image-block">

    <a href="#" class="i-estate-slide__image-link u-img-hover">
      <div class="img  --ratio-1-1">
      <picture>
    
    <img src="images/examples/fashion-312x312.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-312x312.jpeg 1x, images/examples/FV3GConVSss-624x624.jpeg 2x">
  </picture>
</div>
    </a>
          <div class="i-estate-slide__badges">
                  <div class="badge  --circle">
  <span class="badge__title">Nový</span>
  </div>
                  <div class="badge --yellow --circle">
  <span class="badge__title">Top</span>
  </div>
              </div>
              <div class="i-overview"><span class="icon --white --lg i-overview__videocamera">
      <img src="images/svg/videocamera.svg"  loading="lazy">
  
  </span>
<span class="icon --white --lg i-overview__camera">
      <img src="images/svg/camera.svg"  loading="lazy">
  
  </span>

    <span class="i-overview__photo-count">
      7</span></div>
    
          <div class="i-estate-slide__cta-button">
        <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/favorite.svg"  loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Do oblíbených</div>

    </button>
      </div>
    
  </div>

  <div class="i-estate-slide__content">
    <header class="i-estate-slide__header">
      <h3 class="i-estate-slide__heading base-h3">
        <a href="#" title="Aparózo Aparózo Aparózo Aparózo" class="i-estate-slide__heading-link">Aparózo Aparózo Aparózo Aparózo</a>
      </h3>
    </header>

          <div class="i-estate-slide__price">
        <span class="i-estate-slide__value">8 850 000</span>
        <span class="i-estate-slide__currency">Kč</span>
      </div>
    
          <div class="i-estate-slide__location">
        Kostelní 19, České Budějovice
      </div>
    
  </div>
</article>

Active 

  •         {% include "@Components/items/estate-slide-item/estate-slide-item.twig" with {
  props: {
    img: {
        src: "images/examples/fashion-312x312.jpeg",
        nativeLazyload: true,
        srcset: [
          "images/examples/FV3GConVSss-312x312.jpeg 1x",
          "images/examples/FV3GConVSss-624x624.jpeg 2x"
        ],
        alt: "alt of image",
        ratio: "1-1"
      },
      overview: {
        threeDimensioinal: true,
        video: true,
        photo: {
          count: "7"
          }
      },
      ctaButton: {
        tag: "button",
        state:"active",
        tooltip:"Do oblíbených",
        icon: {
          path: "images/svg/favorite.svg",
        }
      },
      id: "",
      headinglevel: "3",
      href: "#",
      title: "Aparózo Aparózo Aparózo Aparózo",
      badges: [
        {
          title: "Nový",
          variant: "circle"
        },
        {
          variant: "circle",
          color: "yellow",
          title: "Top"
        }
      ],
      price: {
        value: "8 850 000",
        currency: "Kč"
      },
      location: "Kostelní 19, České Budějovice"
  }
} %}

      
  •             

<article class="i-estate-slide" id="">

  <div class="i-estate-slide__image-block">

    <a href="#" class="i-estate-slide__image-link u-img-hover">
      <div class="img  --ratio-1-1">
      <picture>
    
    <img src="images/examples/fashion-312x312.jpeg" alt="alt of image" loading="lazy" draggable="false" srcset="images/examples/FV3GConVSss-312x312.jpeg 1x, images/examples/FV3GConVSss-624x624.jpeg 2x">
  </picture>
</div>
    </a>
          <div class="i-estate-slide__badges">
                  <div class="badge  --circle">
  <span class="badge__title">Nový</span>
  </div>
                  <div class="badge --yellow --circle">
  <span class="badge__title">Top</span>
  </div>
              </div>
              <div class="i-overview"><span class="icon --white --lg i-overview__videocamera">
      <img src="images/svg/videocamera.svg"  loading="lazy">
  
  </span>
<span class="icon --white --lg i-overview__camera">
      <img src="images/svg/camera.svg"  loading="lazy">
  
  </span>

    <span class="i-overview__photo-count">
      7</span></div>
    
          <div class="i-estate-slide__cta-button">
        <button class="cta-button --active  --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/favorite-active.svg"  loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Do oblíbených</div>

    </button>
      </div>
    
  </div>

  <div class="i-estate-slide__content">
    <header class="i-estate-slide__header">
      <h3 class="i-estate-slide__heading base-h3">
        <a href="#" title="Aparózo Aparózo Aparózo Aparózo" class="i-estate-slide__heading-link">Aparózo Aparózo Aparózo Aparózo</a>
      </h3>
    </header>

          <div class="i-estate-slide__price">
        <span class="i-estate-slide__value">8 850 000</span>
        <span class="i-estate-slide__currency">Kč</span>
      </div>
    
          <div class="i-estate-slide__location">
        Kostelní 19, České Budějovice
      </div>
    
  </div>
</article>

Schema 

    {
  "props": {
    "img": {
      "type": "object",
      "description": "same as img/img.twig"
    },
    "badges": {
      "type": "array",
      "badge": {
        "type": "string",
        "description": "Component badge"
      }
    },
    "overview": {
      "threeDimensioinal": {
        "type": "boolean",
        "description": "Set if should include three dimensional"
      },
      "video": {
        "type": "boolean",
        "description": "Set if should include video"
      },
      "count": {
        "type": "string",
        "description": "Count of photos"
      }
    },
    "ctaButton": {
      "extraClass": {
        "type": "string",
        "description": "Extra class of button"
      },
      "url": {
        "type": "string",
        "description": "Url address (default # if tag is a)"
      },
      "state": {
        "type": "string",
        "description": "active"
      },
      "tag": {
        "type": "string",
        "description": "a | button | span (default)"
      },
      "tooltip": {
        "type": "string",
        "description": "Content of tooltip"
      },
      "icon": {
        "type": "object",
        "props": {
          "src": {
            "type": "string",
            "description": "path to icon"
          },
          "size": {
            "type": "string",
            "description": "lg (default) | sm"
          },
          "color": {
            "type": "string",
            "description": "black (default) | primary | white"
          }
        }
      }
    },
    "id": {
      "type": "string",
      "description": "black (default) | primary | white"
    },
    "headinglevel": {
      "type": "string",
      "description": "Set level of heading"
    },
    "href": {
      "type": "string",
      "description": "Set path"
    },
    "title": {
      "type": "string",
      "description": "Title of subject"
    },
    "price": {
      "value": {
        "type": "string",
        "description": "Value of subject"
      },
      "currency": {
        "type": "string",
        "description": "Currency of value"
      }
    }
  }
}