-
Usp section title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?
Ukládejte si své favority
Uložte si vše co vám padne do oka, ať to máte vždy rychle po ruceUložte si filtry hledání
Netravte čas nastavování stejných filtrů stále do kola. Uložte si je.Dáme vám sami vědět
Už vám nikdy neuteče nemovitost podle vašich preferencí -
{% include "@Components/sections/usp-section/usp-section.twig" with { props: { header: { title: "Usp section title", perex: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?", variant: 'left', extraClass: '--fw500' }, variant: "benefits", sectionImage: { src: "images/content/usp-heading.svg", alt: "alt of image" }, usps: [ { title: "Ukládejte si své favority", perex: "Uložte si vše co vám padne do oka, ať to máte vždy rychle po ruce", icon: { src: "images/advantages-ico/heart-usp.svg" } }, { title: "Uložte si filtry hledání", perex: "Netravte čas nastavování stejných filtrů stále do kola. Uložte si je.", icon: { src: "images/advantages-ico/filter.svg" } }, { title: "Dáme vám sami vědět", perex: "Už vám nikdy neuteče nemovitost podle vašich preferencí", icon: { src: "images/advantages-ico/home-star.svg" } } ], button: { title: 'Nechte si hlídat nemovitosti', url: '#hlidac', iconBefore: true, icon: { src: 'images/svg/bell-white.svg', size: 'xl' } } } } %} -
<section class="base-section s-usp usp-benefits"> <div class="base-section__container container"> <div class="s-usp__wrapper"> <div class="s-usp__heading"> <header class="base-header --left --fw500"> <div class="base-header__heading-wrapper"> <h2 class="base-header__heading base-h2">Usp section title</h2> </div> <p class="base-header__paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?</p> </header> </div> <div class="s-usp__image"> <div class="img"> <picture> <img src="" data-src="images/content/usp-heading.svg" alt="alt of image" draggable="false"> </picture> </div> </div> </div> <div class="g-usp"> <div class="g-usp__item"> <div class="i-usp"> <div class="i-usp__image"> <span class="icon"> <img src="images/advantages-ico/heart-usp.svg" loading="lazy"> </span> </div> <div class="i-usp__content"> <h3 class="i-usp__heading">Ukládejte si své favority</h3> <div class="i-usp__perex">Uložte si vše co vám padne do oka, ať to máte vždy rychle po ruce</div> </div> </div> </div> <div class="g-usp__item"> <div class="i-usp"> <div class="i-usp__image"> <span class="icon"> <img src="images/advantages-ico/filter.svg" loading="lazy"> </span> </div> <div class="i-usp__content"> <h3 class="i-usp__heading">Uložte si filtry hledání</h3> <div class="i-usp__perex">Netravte čas nastavování stejných filtrů stále do kola. Uložte si je.</div> </div> </div> </div> <div class="g-usp__item"> <div class="i-usp"> <div class="i-usp__image"> <span class="icon"> <img src="images/advantages-ico/home-star.svg" loading="lazy"> </span> </div> <div class="i-usp__content"> <h3 class="i-usp__heading">Dáme vám sami vědět</h3> <div class="i-usp__perex">Už vám nikdy neuteče nemovitost podle vašich preferencí</div> </div> </div> </div> </div> <div class="s-usp__button"> <a class="btn --conversion --xxl --icon-before" href='#hlidac'> <span class="btn__title ">Nechte si hlídat nemovitosti</span> <span class="btn__icon "> <span class="icon --xl"> <img src="images/svg/bell-white.svg" loading="lazy"> </span> </span> </a> </div> </div> </section>
-
-
{% include "@Components/sections/usp-section/usp-section.twig" with { props: { header: { title: "Denně tu máme tisíce nových nemovitostí!", perex: "Jednoduše si nastavte jaké typy nemovitostí chcete hlídat a my vás budeme hned informovat, jakmile se nemovitost objeví v nabídce.", variant: 'left', extraClass: '--fw500' }, variant: 'icons-right', usps: [ { title: "Ukládejte si své favority", perex: "Uložte si vše co vám padne do oka, ať to máte vždy rychle po ruce", icon: { src: "images/advantages-ico/heart-usp.svg" }, iconLink: { href: "#ukladejte" } }, { title: "Uložte si filtry hledání", perex: "Netravte čas nastavování stejných filtrů stále do kola. Uložte si je.", icon: { src: "images/advantages-ico/filter.svg" } }, { title: "Dáme vám sami vědět", perex: "Už vám nikdy neuteče nemovitost podle vašich preferencí", icon: { src: "images/advantages-ico/home-star.svg" } } ], button: { title: 'Začít hlídat nemovitosti', url: '#hlidac', iconBefore: true, size: 'xxl', icon: { src: 'images/svg/bell-white.svg', size: 'xl' } } } } %} -
<section class="base-section s-usp usp-icons-right"> <div class="base-section__container container"> <div class="s-usp__wrapper s-usp__wrapper--split"> <div class="s-usp__left"> <div class="s-usp__heading"> <header class="base-header --left --fw500"> <div class="base-header__heading-wrapper"> <h2 class="base-header__heading base-h2">Denně tu máme tisíce nových nemovitostí!</h2> </div> <p class="base-header__paragraph">Jednoduše si nastavte jaké typy nemovitostí chcete hlídat a my vás budeme hned informovat, jakmile se nemovitost objeví v nabídce.</p> </header> </div> </div> <div class="s-usp__right"> <div class="g-usp"> <div class="g-usp__item"> <div class="i-usp"> <div class="i-usp__image"> <a class="link --black" href="#ukladejte" aria-label="Ukládejte si své favority"> <span class="link__icon "> <span class="icon"> <img src="images/advantages-ico/heart-usp.svg" loading="lazy"> </span> </span> </a> </div> <div class="i-usp__content"> <h3 class="i-usp__heading">Ukládejte si své favority</h3> <div class="i-usp__perex">Uložte si vše co vám padne do oka, ať to máte vždy rychle po ruce</div> </div> </div> </div> <div class="g-usp__item"> <div class="i-usp"> <div class="i-usp__image"> <span class="icon"> <img src="images/advantages-ico/filter.svg" loading="lazy"> </span> </div> <div class="i-usp__content"> <h3 class="i-usp__heading">Uložte si filtry hledání</h3> <div class="i-usp__perex">Netravte čas nastavování stejných filtrů stále do kola. Uložte si je.</div> </div> </div> </div> <div class="g-usp__item"> <div class="i-usp"> <div class="i-usp__image"> <span class="icon"> <img src="images/advantages-ico/home-star.svg" loading="lazy"> </span> </div> <div class="i-usp__content"> <h3 class="i-usp__heading">Dáme vám sami vědět</h3> <div class="i-usp__perex">Už vám nikdy neuteče nemovitost podle vašich preferencí</div> </div> </div> </div> </div> </div> <div class="s-usp__button"> <a class="btn --conversion --xxl --icon-before" href='#hlidac'> <span class="btn__title ">Začít hlídat nemovitosti</span> <span class="btn__icon "> <span class="icon --xl"> <img src="images/svg/bell-white.svg" loading="lazy"> </span> </span> </a> </div> </div> </div> </section>
Schema
{
"props": {
"title": {
"type": "string",
"description": "Title of the component"
},
"perex": {
"type": "string",
"description": "Perex of the component"
},
"sectionImage": {
"type": "object",
"description": "image of the section",
"props": {
"src": {
"type": "string",
"description": "url of the section image"
},
"alt": {
"type": "string",
"description": "alt of the section image"
}
}
},
"usps": {
"type": "array of objects",
"description": "All props are documented by the component `usp-item`."
}
}
}