Stylebook

Top

Nový

A

Mimořádně úsporná

Developerský projekt

Prodej luxusního bytu s balkonem 120m2Lannova, České Budějovice
6 900 000 Kč

A

Mimořádně úsporná

Hypotéku?

Podíl ⅙ nemovitosti

30,- / m2

Včetně provize pro makléře

Chci se zeptat
Hypotéku?

Zavřít

Do oblíbených
Do oblíbených

        {% include "@Components/sections/estate-detail-intro-section/estate-detail-intro-section.twig" with { props: {
	title: "Prodej luxusního bytu s balkonem 120m2",
	perex:"Lannova, České Budějovice",
	status: "Developerský projekt",
	economy_letter: "A",
	items:[
		{
			img_props: {
			src: "images/examples/tHkJAMcO3QE-1356x904.jpeg"
		},
			href: "images/examples/FV3GConVSss-1356x904.jpeg"
		},
		{
			path: "@Components/items/estate-detail-intro-youtube-item/estate-detail-intro-youtube-item.twig",
			href: "https://www.youtube-nocookie.com/embed/vR_f4dTwU_8",
		},
		{
			path: "@Components/items/estate-detail-intro-iframe-item/estate-detail-intro-iframe-item.twig",
			href: "https://my.matterport.com/show/?m=47UzBM1jof8",
		},
		{
			img_props: {
			src: "images/examples/FV3GConVSss-1356x904.jpeg",
			alt: ""
		},
			href: "images/examples/FV3GConVSss-1356x904.jpeg"
		},
		{
			img_props: {
			src: "images/examples/FV3GConVSss-1356x904.jpeg",
			alt: ""
		},
			href: "images/examples/FV3GConVSss-1356x904.jpeg"
		}
	],
	badges:{
		variant:"horizontal",
		badges:[{
			variant: "circle",
			color: "yellow",
			title: "Top"
		},{
			variant: "circle",
			title: "Nový"
		}]},
	overview_buttons:{
		threeDimensional: true,
		video: true,
		photo: {
			count: "1"
		}
	},
	price: "6 900 000 Kč",
	mono_economy_letter: {
		economy_letter: "A",
		variant: "mono",
		size: "small"
	},
	infos:[{
		info:"Podíl ⅙ nemovitosti"
	},{
		info:"30,- / m2"
	},{
		info:"Včetně provize pro makléře"
	}],
	share_buttons:[
		{
			variant: "whatsapp",
			url: "whatsapp://send?text=https://youtu.be/989-7xsRLR4?t=34",
			tag:"a",
			icon: {
			src: "images/svg/whatsapp.svg",}
		}
		,{
			variant: "messenger",
			url: "fb-messenger://share/?link=https://youtu.be/989-7xsRLR4?t=34",
			icon: {
				src: "images/svg/messenger.svg",}
		},{
			variant: "facebook",
			url: "https://www.facebook.com/sharer/sharer.php?u=https://youtu.be/989-7xsRLR4?t=34",
			icon: {
				src: "images/svg/facebook-share.svg",}
		},{

			variant: "twitter",
			url: "https://twitter.com/home?status=https://youtu.be/989-7xsRLR4?t=34",
			icon: {
				src: "images/svg/twitter.svg",}
		},{
			variant: "print",
			tag: "button",
			type:"button",
			icon: {
				src: "images/svg/print.svg",}
		},{
			variant: "copy",
			tag: "button",
			type:"button",
			icon: {
				src: "images/svg/copy-url.svg"
			}
		},{
			variant: "mail",
			url:"mailto:?&body=https://youtu.be/989-7xsRLR4?t=34",
			icon: {
				src: "images/svg/send-mail.svg",}
		}],
	buttons:{
		primary: {
			title: "Chci se zeptat",
			size: "large"
		},
		outline: {
			title: "Hypotéku?",
			variant: "outline",
			size: "large"
		},
		outline_perex:"Zjistěte zdarma a nezávazně své možnosti hypotéky u této nemovitosti."
	},
	cta_button: {
		tooltip: "Do oblíbených",
		icon: {
			path: "images/svg/favorite.svg",
			color: "primary"
		}
	}
}
} %}

          

<section class="base-section   --p-top-0   s-estate-detail-intro">
  <div class="base-section__container container">
    		<div class="s-estate-detail-intro__top gallery">
			<div class="swiper s-estate-detail-intro__slider">
  <div class="swiper-wrapper">
                  <div class="swiper-slide   swiper-slide__base-1" >
                      <a href="images/examples/FV3GConVSss-1356x904.jpeg" data-fancybox="data-fancybox" data-caption="" data-bg="images/examples/tHkJAMcO3QE-1356x904.jpeg" class="i-estate-detail-intro__img u-img-hover gallery-item gallery-1">
      <div class="img">
      <picture>
    
    <img src="images/examples/tHkJAMcO3QE-1356x904.jpeg" alt="" draggable="false">
  </picture>
</div>
  </a>
                                </div>
              <div class="swiper-slide   " >
                      <div class="i-estate-detail-intro__youtube">
	<iframe src="https://www.youtube-nocookie.com/embed/vR_f4dTwU_8" frameborder="0"></iframe>
	<a href="https://www.youtube-nocookie.com/embed/vR_f4dTwU_8" data-fancybox></a>
</div>                  </div>
              <div class="swiper-slide   " >
                      <div class="i-estate-detail-intro__iframe">
	<iframe src="https://my.matterport.com/show/?m=47UzBM1jof8" frameborder="0"></iframe>
    <a href="" data-fancybox data-type="iframe" data-preload="false"></a>
</div>
                  </div>
              <div class="swiper-slide   swiper-slide__base-2" >
                      <a href="images/examples/FV3GConVSss-1356x904.jpeg" data-fancybox="data-fancybox" data-caption="" data-bg="images/examples/FV3GConVSss-1356x904.jpeg" class="i-estate-detail-intro__img u-img-hover gallery-item gallery-1">
      <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-1356x904.jpeg" alt="" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
                                </div>
              <div class="swiper-slide   swiper-slide__base-3" >
                      <a href="images/examples/FV3GConVSss-1356x904.jpeg" data-fancybox="data-fancybox" data-caption="" data-bg="images/examples/FV3GConVSss-1356x904.jpeg" class="i-estate-detail-intro__img u-img-hover gallery-item gallery-1">
      <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-1356x904.jpeg" alt="" loading="lazy" draggable="false">
  </picture>
</div>
  </a>
                                </div>
            </div>

  					<div class="s-estate-detail-intro__arrows d-none d-lg-block">
						<div class="swiper-arrows --lg">

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

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

											<div class="s-estate-detail-intro__overview">
							<ul class="g-overview">
      <li>
      <a class="overview-button" href='#'></a>
    </li>
      <li>
      <a class="overview-button" href='#'></a>
    </li>
      <li>
      <a class="overview-button" href='#'></a>
    </li>
  </ul>
						</div>
									</div>

			<div class="s-estate-detail-intro__top-content-wrapper">
				<div class="s-estate-detail-intro__top-content">
											<div class="s-estate-detail-intro__badges">
							<ul class="g-badges --horizontal">
      <li>
      <div class="badge --yellow --circle">
  <span class="badge__title">Top</span>
  </div>
    </li>
      <li>
      <div class="badge  --circle">
  <span class="badge__title">Nový</span>
  </div>
    </li>
  </ul>
						</div>
					
											<div class="s-estate-detail-intro__energy-label d-none d-xxl-flex">
							      

  
<div class="energy-label    --extremly_eco">
  <h3 class="base-h2 energy-label__heading">A</h3>
  <p class="energy-label__perex">Mimořádně úsporná</p>
</div>
						</div>
					
											<div class="s-estate-detail-intro__status">Developerský projekt</div>
					
					<header class="s-estate-detail-intro__header">
						<h1 class="s-estate-detail-intro__heading base-h1">Prodej luxusního bytu s balkonem 120m2<span class="s-estate-detail-intro__perex">Lannova, České Budějovice</span></h1>
					</header>
				</div>
			</div>

							<div class="s-estate-detail-intro__overview">
					<ul class="g-overview">
      <li>
      <a class="overview-button" href='#'></a>
    </li>
      <li>
      <a class="overview-button" href='#'></a>
    </li>
      <li>
      <a class="overview-button" href='#'></a>
    </li>
  </ul>
				</div>
					</div>

		<div class="s-estate-detail-intro__bottom">
			<div class="s-estate-detail-intro__info">
				<h2 class="base-h1 s-estate-detail-intro__price">6 900 000 Kč</h2>

									<div class="s-estate-detail-intro__mono-energy-label">
						      

  <div class="energy-label --mono --small  --extremly_eco">
  <h3 class="base-h3 energy-label__heading">A</h3>
  <p class="energy-label__perex">Mimořádně úsporná</p>
</div>
					</div>
				
                                                        <a class="btn --outline" href='#'>    <span class="btn__title ">Hypotéku?</span>
      </a>
                
									<div class="s-estate-detail-intro__info-block d-none d-xxl-flex">
						<span class="icon">
      <img src="images/svg/info.svg"  loading="lazy">
  
  </span>
						<ul class="s-estate-detail-intro__info-list">
															<li>
									Podíl ⅙ nemovitosti
								</li>
															<li>
									30,- / m2
								</li>
															<li>
									Včetně provize pro makléře
								</li>
													</ul>
					</div>
							</div>

			<footer class="s-estate-detail-intro__footer">

				<div class="s-estate-detail-intro__buttons">
											<div class="s-estate-detail-intro__button-primary">
							<a class="btn --conversion --large" href='#'>    <span class="btn__title ">Chci se zeptat</span>
      </a>

													</div>
					
											<a class="btn --outline --large" href='#'>    <span class="btn__title ">Hypotéku?</span>
      </a>

															</div>

				<div class="s-estate-detail-intro__socials">
											<div class="s-estate-detail-intro__share-buttons">
							
<ul class="g-share-buttons">
                    <li>
            <a class="share-button --whatsapp" href=''>
  <span class="icon  --lg">
      <img src="images/svg/whatsapp.svg"  loading="lazy">
  
  </span>
</a>
        </li>
                    <li>
            <a class="share-button --messenger" href=''>
  <span class="icon  --lg">
      <img src="images/svg/messenger.svg"  loading="lazy">
  
  </span>
</a>
        </li>
                    <li>
            <a class="share-button --facebook" href=''>
  <span class="icon  --lg">
      <img src="images/svg/facebook-share.svg"  loading="lazy">
  
  </span>
</a>
        </li>
                    <li>
            <a class="share-button --twitter" href=''>
  <span class="icon  --lg">
      <img src="images/svg/twitter.svg"  loading="lazy">
  
  </span>
</a>
        </li>
                    <li>
              <button class="share-button --print" type="button">
  <span class="icon  --lg">
      <img src="images/svg/print.svg"  loading="lazy">
  
  </span>
</button>
        </li>
                                                    <li>
                <button class="share-button --copy" type="button" data-target="copy-modal" data-toggle="modal">
  <span class="icon  --lg">
      <img src="images/svg/copy-url.svg"  loading="lazy">
  
  </span>
</button>
        </li>
                    <li>
            <a class="share-button --mail" href=''>
  <span class="icon  --lg">
      <img src="images/svg/send-mail.svg"  loading="lazy">
  
  </span>
</a>
        </li>
    </ul>

    

  

<div data-modal tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true" class="base-modal copy-modal" id="copy-modal">
      <div class="base-modal__close-out" data-modal-close="copy-modal">
      <div class="base-modal__close-out-image">
        <span class="icon --white">
      <img src="images/svg/cross.svg" alt="Zavřít" loading="lazy">
  
  </span>
      </div>
      <div class="base-modal__close-out-text">
        Zavřít
      </div>
    </div>
    <div class="base-modal__box --sm">
        <div class="base-modal__content">
          <header class="base-header --center">

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









































	</header>
    <form>
      <div class="f-wrap ">
      
    <textarea class="f-base textarea" rows="3" disabled></textarea>
  </div>
      <div class="copy-link-form__footer-buttons">
        <span class="copy-button">
          <button class="btn --conversion" type="submit" data-tooltip-text="Zkopírováno">    <span class="btn__title "></span>
      </button>
        </span>
      </div>
    </form>

      </div>
  </div>
</div>
						</div>
					
											<div class="s-estate-detail-intro__cta-button">
							<span 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>

    </span>
							<span class="s-estate-detail-intro__cta-button-tooltip">Do oblíbených</span>
						</div>
					
				</div>

			</footer>
		</div>

	  </div>
</section>

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "perex": {
      "type": "string",
      "description": "Perex of the component"
    },
    "status": {
      "type": "string",
      "description": "Status of the component"
    },
    "economy_letter": {
      "type": "string",
      "description": " A | B | C | D | E | F | G (default)"
    },
    "img": {
      "src": {
        "type": "string",
        "description": "Url of image"
      },
      "alt": {
        "type": "string",
        "description": "Alt of image"
      },
      "srcset":  {
        "type": "array",
        "description": "Paths to img in format : 'path ...w', 'path ...w'"
      },
      "sizes": {
        "type": "array",
        "description": "Rules of img size in layout in format : 'rule', 'rule'"
      }
    },
    "badges": {
      "variant": {
        "type": "string",
        "description": "horizontal (default)| vertical"
      },
      "badges":{
        "type": "array of object",
        "description": "All props are documented by the component `badge`."
      }
    },
    "overview_buttons": {
      "type": "array of object",
      "description": "All props are documented by the component `overview-button`."
    },
    "price": {
      "type": "string",
      "description": "Price of component"
    },
    "mono_economy_letter":{
      "type": "boolean",
      "description": "true | undefined"
    },
    "infos":{
        "type": "array of object",
        "info":{
        "type": "string",
        "description": "Info about component"
    }},
    "share_buttons":{
      "type": "array of object",
      "description": "All props are documented by the component `share-button`."
    },
    "buttons":{
      "primary":{
        "type": "object",
        "description": "All props are documented by the component `button`."
      },
      "outline": {
        "type": "object",
        "description": "All props are documented by the component `button`."
      },
      "outline_perex":{
        "type": "string",
        "description": "Button perex"
      }
    },
    "cta_button": {
      "type": "object",
      "description": "All props are documented by the component `cta-button`."
    }
  }
}