-
![]()
Aktuálně u nás nabízí nemovitost
881 Realitních kanceláří12 382 Aktivních makléřů -
-
{% include "@Components/sections/highlited-broker-section/highlited-broker-section.twig" with { props: { title: "TOP Makléři", perex: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?", items: [ { name: "Jakub Danovič Velmidlouhejmeno", url:"#", img: { src: "images/examples/fashion-168x168.jpeg", ratio: "1-1", extraClass:"i-highlighted-broker__img" }, rating: { stars: { percentage:"30" }, legend: { votes:"934", label:"hlasů" } }, metas:[{ number: "777257283" },{ email: "mail@email.cz" },{ url: "#" }], real_estate_img: { src: "images/content/bidli.png", isContain: true, extraClass: "real-estate-img" }, button: { title: "Detail" } }, { name: "Radovan Vezekmín", url:"#", img: { src: "images/examples/clothes-168x168.jpeg", ratio: "1-1", extraClass:"i-highlighted-broker__img" }, rating: { stars: { percentage:"50" }, legend: { votes:"934", label:"hlasů" } }, metas:[{ number: "777257283" },{ email: "mail@email.cz" },{ url: "#" }], real_estate_img: { src: "images/content/hanzlikova.png", isContain: true, extraClass: "real-estate-img" }, button:{ title: "Detail" } }, { name: "Radovan Vezekmín", url:"#", img: { src: "images/examples/clothes-168x168.jpeg", ratio: "1-1", extraClass:"i-highlighted-broker__img" }, rating: { stars: { percentage:"45" }, legend: { votes:"934", label:"hlasů" } }, metas:[{ number: "777257283" },{ email: "mail@email.cz" },{ url: "#" }], real_estate_img: { src: "images/content/remax.png", isContain: true, extraClass: "real-estate-img" }, button:{ title: "Detail" } }, { name: "Otakar Ubrousek", url:"#", img: { src: "images/examples/clothes-168x168.jpeg", ratio: "1-1", extraClass:"i-highlighted-broker__img" }, rating: { stars: { percentage:"75" }, legend: { votes:"934", label:"hlasů" } }, metas:[{ number: "777257283" },{ email: "mail@email.cz" },{ url: "#" }], real_estate_img: { src: "images/content/bidli.png", isContain: true, extraClass: "real-estate-img" }, button:{ title: "Detail" } }, { name: "Romana Kolářová", url:"#", img: { src: "images/examples/fashion-168x168.jpeg", ratio: "1-1", extraClass:"i-highlighted-broker__img" }, rating: { stars: { percentage:"95" }, legend: { votes:"934", label:"hlasů" } }, metas:[{ number: "777257283" },{ email: "mail@email.cz" },{ url: "#" }], real_estate_img: { src: "images/content/bidli.png", isContain: true, extraClass: "real-estate-img" }, button:{ title: "Detail" } }, { name: "Romana Kolářová", url:"#", img: { src: "images/examples/fashion-168x168.jpeg", ratio: "1-1", extraClass:"i-highlighted-broker__img" }, rating: { stars: { percentage:"85" }, legend: { votes:"934", label:"hlasů" } }, metas:[{ number: "777257283" },{ email: "mail@email.cz" },{ url: "#" }], real_estate_img: { src: "images/content/bidli.png", isContain: true, extraClass: "real-estate-img" }, button: { title: "Detail" } } ], rating_text: "Makléře u nás hodnotí lidé, kteří s nimi mají osobní zkušenost.", decor_img: { src: "images/svg/highlited-broker-section-decor.svg", extraClass: "s-highlited-broker__decor-img" }, rating: { stars: { percentage: "90", setting: { size: "lg" } } }, subsection: { title: "Aktuálně u nás nabízí nemovitost", counts: [ { number: "881", label: "Realitních kanceláří" }, { number: "12 382", label: "Aktivních makléřů" } ]} } } %} -
<section class="base-section s-highlited-broker"> <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-highlited-broker__wrapper"> <ul class="g-heighlited-broker"> <li class=""> <article class="i-highlighted-broker"> <a href="#" class="i-highlighted-broker__image-link u-img-hover"> <div class="img --ratio-1-1 i-highlighted-broker__img"> <picture> <img src="" data-src="images/examples/fashion-168x168.jpeg" alt="" draggable="false"> </picture> </div> </a> <div class="i-highlighted-broker__content"> <h3 class="base-h3 i-highlighted-broker__heading"> <a href="#" title="Jakub Danovič Velmidlouhejmeno">Jakub Danovič Velmidlouhejmeno</a> </h3> <div class="i-rating"> <div class="i-rating__content"> <ul class="g-rating__stars" data-percentage="30"> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-half.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-empty.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-empty.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-empty.svg" alt="*" loading="lazy"> </span> </div> </li> </ul> <div class="i-rating__legend"> <span>934</span> <span>hlasů</span> </div> </div> </div> <ul class="g-broker-meta"> <li> <a class="i-broker-meta" href="tel:+777257283"> <span class="icon --sm"> <img src="images/svg/phone.svg" alt="Telefon" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="mailto:mail@email.cz"> <span class="icon --sm"> <img src="images/svg/mail.svg" alt="Email" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="#"> <span class="icon --sm"> <img src="images/svg/link.svg" alt="www" loading="lazy"> </span> </a> </li> </ul> <div class="i-highlighted-broker__bottom-part"> <div class="img --contain real-estate-img"> <picture> <img src="" data-src="images/content/bidli.png" alt="" draggable="false"> </picture> </div> <a class="btn --conversion --small" href='#'> <span class="btn__title ">Detail</span> </a> </div> </div> </article> </li> <li class=""> <article class="i-highlighted-broker"> <a href="#" class="i-highlighted-broker__image-link u-img-hover"> <div class="img --ratio-1-1 i-highlighted-broker__img"> <picture> <img src="" data-src="images/examples/clothes-168x168.jpeg" alt="" draggable="false"> </picture> </div> </a> <div class="i-highlighted-broker__content"> <h3 class="base-h3 i-highlighted-broker__heading"> <a href="#" title="Radovan Vezekmín">Radovan Vezekmín</a> </h3> <div class="i-rating"> <div class="i-rating__content"> <ul class="g-rating__stars" data-percentage="50"> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-half.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-empty.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-empty.svg" alt="*" loading="lazy"> </span> </div> </li> </ul> <div class="i-rating__legend"> <span>934</span> <span>hlasů</span> </div> </div> </div> <ul class="g-broker-meta"> <li> <a class="i-broker-meta" href="tel:+777257283"> <span class="icon --sm"> <img src="images/svg/phone.svg" alt="Telefon" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="mailto:mail@email.cz"> <span class="icon --sm"> <img src="images/svg/mail.svg" alt="Email" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="#"> <span class="icon --sm"> <img src="images/svg/link.svg" alt="www" loading="lazy"> </span> </a> </li> </ul> <div class="i-highlighted-broker__bottom-part"> <div class="img --contain real-estate-img"> <picture> <img src="" data-src="images/content/hanzlikova.png" alt="" draggable="false"> </picture> </div> <a class="btn --conversion --small" href='#'> <span class="btn__title ">Detail</span> </a> </div> </div> </article> </li> <li class=""> <article class="i-highlighted-broker"> <a href="#" class="i-highlighted-broker__image-link u-img-hover"> <div class="img --ratio-1-1 i-highlighted-broker__img"> <picture> <img src="" data-src="images/examples/clothes-168x168.jpeg" alt="" draggable="false"> </picture> </div> </a> <div class="i-highlighted-broker__content"> <h3 class="base-h3 i-highlighted-broker__heading"> <a href="#" title="Radovan Vezekmín">Radovan Vezekmín</a> </h3> <div class="i-rating"> <div class="i-rating__content"> <ul class="g-rating__stars" data-percentage="45"> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-empty.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-empty.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-empty.svg" alt="*" loading="lazy"> </span> </div> </li> </ul> <div class="i-rating__legend"> <span>934</span> <span>hlasů</span> </div> </div> </div> <ul class="g-broker-meta"> <li> <a class="i-broker-meta" href="tel:+777257283"> <span class="icon --sm"> <img src="images/svg/phone.svg" alt="Telefon" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="mailto:mail@email.cz"> <span class="icon --sm"> <img src="images/svg/mail.svg" alt="Email" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="#"> <span class="icon --sm"> <img src="images/svg/link.svg" alt="www" loading="lazy"> </span> </a> </li> </ul> <div class="i-highlighted-broker__bottom-part"> <div class="img --contain real-estate-img"> <picture> <img src="" data-src="images/content/remax.png" alt="" draggable="false"> </picture> </div> <a class="btn --conversion --small" href='#'> <span class="btn__title ">Detail</span> </a> </div> </div> </article> </li> <li class=""> <article class="i-highlighted-broker"> <a href="#" class="i-highlighted-broker__image-link u-img-hover"> <div class="img --ratio-1-1 i-highlighted-broker__img"> <picture> <img src="" data-src="images/examples/clothes-168x168.jpeg" alt="" draggable="false"> </picture> </div> </a> <div class="i-highlighted-broker__content"> <h3 class="base-h3 i-highlighted-broker__heading"> <a href="#" title="Otakar Ubrousek">Otakar Ubrousek</a> </h3> <div class="i-rating"> <div class="i-rating__content"> <ul class="g-rating__stars" data-percentage="75"> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-half.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-empty.svg" alt="*" loading="lazy"> </span> </div> </li> </ul> <div class="i-rating__legend"> <span>934</span> <span>hlasů</span> </div> </div> </div> <ul class="g-broker-meta"> <li> <a class="i-broker-meta" href="tel:+777257283"> <span class="icon --sm"> <img src="images/svg/phone.svg" alt="Telefon" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="mailto:mail@email.cz"> <span class="icon --sm"> <img src="images/svg/mail.svg" alt="Email" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="#"> <span class="icon --sm"> <img src="images/svg/link.svg" alt="www" loading="lazy"> </span> </a> </li> </ul> <div class="i-highlighted-broker__bottom-part"> <div class="img --contain real-estate-img"> <picture> <img src="" data-src="images/content/bidli.png" alt="" draggable="false"> </picture> </div> <a class="btn --conversion --small" href='#'> <span class="btn__title ">Detail</span> </a> </div> </div> </article> </li> <li class=""> <article class="i-highlighted-broker"> <a href="#" class="i-highlighted-broker__image-link u-img-hover"> <div class="img --ratio-1-1 i-highlighted-broker__img"> <picture> <img src="" data-src="images/examples/fashion-168x168.jpeg" alt="" draggable="false"> </picture> </div> </a> <div class="i-highlighted-broker__content"> <h3 class="base-h3 i-highlighted-broker__heading"> <a href="#" title="Romana Kolářová">Romana Kolářová</a> </h3> <div class="i-rating"> <div class="i-rating__content"> <ul class="g-rating__stars" data-percentage="95"> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-half.svg" alt="*" loading="lazy"> </span> </div> </li> </ul> <div class="i-rating__legend"> <span>934</span> <span>hlasů</span> </div> </div> </div> <ul class="g-broker-meta"> <li> <a class="i-broker-meta" href="tel:+777257283"> <span class="icon --sm"> <img src="images/svg/phone.svg" alt="Telefon" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="mailto:mail@email.cz"> <span class="icon --sm"> <img src="images/svg/mail.svg" alt="Email" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="#"> <span class="icon --sm"> <img src="images/svg/link.svg" alt="www" loading="lazy"> </span> </a> </li> </ul> <div class="i-highlighted-broker__bottom-part"> <div class="img --contain real-estate-img"> <picture> <img src="" data-src="images/content/bidli.png" alt="" draggable="false"> </picture> </div> <a class="btn --conversion --small" href='#'> <span class="btn__title ">Detail</span> </a> </div> </div> </article> </li> <li class=""> <article class="i-highlighted-broker"> <a href="#" class="i-highlighted-broker__image-link u-img-hover"> <div class="img --ratio-1-1 i-highlighted-broker__img"> <picture> <img src="" data-src="images/examples/fashion-168x168.jpeg" alt="" draggable="false"> </picture> </div> </a> <div class="i-highlighted-broker__content"> <h3 class="base-h3 i-highlighted-broker__heading"> <a href="#" title="Romana Kolářová">Romana Kolářová</a> </h3> <div class="i-rating"> <div class="i-rating__content"> <ul class="g-rating__stars" data-percentage="85"> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon"> <img src="images/svg/star-empty.svg" alt="*" loading="lazy"> </span> </div> </li> </ul> <div class="i-rating__legend"> <span>934</span> <span>hlasů</span> </div> </div> </div> <ul class="g-broker-meta"> <li> <a class="i-broker-meta" href="tel:+777257283"> <span class="icon --sm"> <img src="images/svg/phone.svg" alt="Telefon" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="mailto:mail@email.cz"> <span class="icon --sm"> <img src="images/svg/mail.svg" alt="Email" loading="lazy"> </span> </a> </li> <li> <a class="i-broker-meta" href="#"> <span class="icon --sm"> <img src="images/svg/link.svg" alt="www" loading="lazy"> </span> </a> </li> </ul> <div class="i-highlighted-broker__bottom-part"> <div class="img --contain real-estate-img"> <picture> <img src="" data-src="images/content/bidli.png" alt="" draggable="false"> </picture> </div> <a class="btn --conversion --small" href='#'> <span class="btn__title ">Detail</span> </a> </div> </div> </article> </li> </ul> <div class="s-highlited-broker__side-content"> <div class="s-highlited-broker__rating"> <p class="s-highlited-broker__rating-text base-h2">Makléře u nás hodnotí lidé, kteří s nimi mají osobní zkušenost.</p> <div class="i-rating"> <div class="i-rating__content"> <ul class="g-rating__stars" data-percentage="90"> <li> <div class="i-star"> <span class="icon --lg"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon --lg"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon --lg"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon --lg"> <img src="images/svg/star-full.svg" alt="*" loading="lazy"> </span> </div> </li> <li> <div class="i-star"> <span class="icon --lg"> <img src="images/svg/star-half.svg" alt="*" loading="lazy"> </span> </div> </li> </ul> </div> </div> </div> <div class="img s-highlited-broker__decor-img"> <picture> <img src="" data-src="images/svg/highlited-broker-section-decor.svg" alt="" draggable="false"> </picture> </div> </div> <div class="img s-highlited-broker__decor-square"> <picture> <img src="images/svg/real-estate-section-decor-img.svg" alt="Decor" loading="lazy" draggable="false"> </picture> </div> </div> <section class="ss-current-info"> <h3 class="base-h1 ss-current-info__heading">Aktuálně u nás nabízí nemovitost</h3> <div class="i-count"> <span class="i-count__number">881</span> <span class="i-count__label $base-h3">Realitních kanceláří</span> </div> <div class="i-count"> <span class="i-count__number">12 382</span> <span class="i-count__label $base-h3">Aktivních makléřů</span> </div> </section> </div> </section>
Schema
{
"props": {
"title": {
"type": "string",
"description": "Title of the component"
},
"perex": {
"type": "string",
"description": "Perex of the component"
},
"items": {
"type": "array of objects",
"description": "All props are documented by the component `heighlited-broker-item`."
},
"ratingText": {
"type": "string",
"description": "Short text about rating"
},
"decorImg": {
"type": "object",
"description": "All props are documented by the component `img`."
},
"ratingGroup": {
"type": "object",
"description": "All props are documented by the component `rating-item`."
},
"subsection":{
"type": "objects",
"description": "All props are documented by the component `current-info-subsection`."
}
}
}