Stylebook

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 ruce

Ulož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í

Nechte si hlídat nemovitosti

        {% 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>

Denně tu máme tisíce nových nemovitostí!

Jednoduše si nastavte jaké typy nemovitostí chcete hlídat a my vás budeme hned informovat, jakmile se nemovitost objeví v nabídce.

Ukládejte si své favority

Uložte si vše co vám padne do oka, ať to máte vždy rychle po ruce

Ulož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í

Začít hlídat nemovitosti

        {% 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`."
		}
	}
}