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í

        {% include "@Components/sections/usp-section/usp-section.twig" with {props: {
  title: "Usp section title",
  perex: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?",
  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: "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: "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: "advantages-ico/home-star.svg"
      }
    }
  ]
}} %}

          




<section class="base-section      s-usp">
  <div class="base-section__container container">
        <div class="s-usp__wrapper">
      <div class="s-usp__heading">
        <header class="base-header --left">
      <h2 class="base-header__heading base-h1">Usp section title</h2>
        <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">
  <svg xmlns="http://www.w3.org/2000/svg" width="61.311" height="54.832" viewBox="0 0 61.311 54.832">
  <path id="Path" d="M41.142,0C51.411,0,58.311,9.654,58.311,18.659c0,4.25-1.555,8.32-4.092,12.289-7.727,12.1-24.666,20.883-25.064,20.883C28.637,51.832,0,36.9,0,18.659,0,9.654,6.9,0,17.169,0A15.458,15.458,0,0,1,29.155,5.54,15.458,15.458,0,0,1,41.142,0Z" transform="translate(1.5 1.5)" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
</svg>

  </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">
  <svg xmlns="http://www.w3.org/2000/svg" width="53.871" height="53.871" viewBox="0 0 53.871 53.871">
  <g id="Group" transform="translate(-9.667 -6.875)">
    <path id="Path" d="M44.667,19.542V5.583A5.583,5.583,0,0,0,39.083,0H5.583A5.583,5.583,0,0,0,0,5.583V44.667A5.583,5.583,0,0,0,5.583,50.25H19.542" transform="translate(11.167 8.375)" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
    <path id="Path-2" data-name="Path" d="M4.576,4.576,0,0" transform="translate(56.841 54.049)" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
    <path id="Path-3" data-name="Path" d="M10.4,0A10.4,10.4,0,1,1,0,10.4,10.4,10.4,0,0,1,10.4,0" transform="translate(39.083 36.292)" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
    <path id="Path-4" data-name="Path" d="M0,.5H8.375" transform="translate(22.333 39.979)" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
    <path id="Path-5" data-name="Path" d="M0,.5H8.375" transform="translate(22.333 48.354)" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
    <path id="Path-6" data-name="Path" d="M13.958,6.209v6.354a1.4,1.4,0,0,1-1.4,1.4H1.4a1.4,1.4,0,0,1-1.4-1.4V6.075a2.792,2.792,0,0,1,1.048-2.18L5.152.612a2.792,2.792,0,0,1,3.488,0l4.271,3.417a2.792,2.792,0,0,1,1.048,2.18Z" transform="translate(22.333 16.75)" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
  </g>
</svg>

  </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">
  <svg xmlns="http://www.w3.org/2000/svg" width="55.541" height="52.203" viewBox="0 0 55.541 52.203">
  <g id="Group" transform="translate(-6.08 -6.695)">
    <g id="Group-2" data-name="Group" transform="translate(8.195 8.195)">
      <path id="Path" d="M10.536,18.061V2.732A2.733,2.733,0,0,0,7.8,0H2.732A2.733,2.733,0,0,0,0,2.732v6.3" transform="translate(35.12)" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
      <path id="Path-2" data-name="Path" d="M0,19.338,21.028,1.315a5.463,5.463,0,0,1,7.11,0L49.169,19.338" transform="translate(0 1.733)" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
      <path id="Path-3" data-name="Path" d="M0,0V25.644a5.462,5.462,0,0,0,5.463,5.463H18.34" transform="translate(3.513 18.061)" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
      <path id="Path-4" data-name="Path" d="M9.983,16.454l4.794,2.519a1.273,1.273,0,0,0,1.847-1.341l-.915-5.338,3.879-3.778a1.271,1.271,0,0,0-.7-2.169l-5.359-.779-2.4-4.86a1.272,1.272,0,0,0-2.281,0l-2.4,4.86-5.359.779a1.271,1.271,0,0,0-.7,2.169l3.879,3.778-.918,5.34a1.273,1.273,0,0,0,1.847,1.341l4.794-2.519" transform="translate(31.929 30.046)" fill="none" stroke="#536069" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3"/>
    </g>
  </g>
</svg>

  </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>
</section>

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "perex": {
      "type": "string",
      "description": "Perex of the component"
    },
    "imgSrc": {
      "type": "string",
      "description": "Url of image"
    },
    "items": {
      "type": "array of objects",
      "description": "All props are documented by the component `usp-item`."
    }
  }
}