Stylebook

20 792 Kč

Předpokládaná měsíční splátka

To zní dobře

250 000 Kč

Třeba na vybavení domáctnosti

To zní dobře

innogy přepis energií

Jednoduše online

To zní dobře

        {% include "@Components/sections/usp-base-section/usp-base-section.twig" with { props: {
  usps: [
    {
      title: "20 792 Kč",
      perex: "Předpokládaná měsíční splátka",
      icon: {
        src: "svg/shopping.svg"
      },
      link:{
        title: "To zní dobře",
        href: "https://www.google.com/",
        color: "primary"
      }
    },
    {
      title: "250 000 Kč",
      perex: "Třeba na vybavení domáctnosti",
      icon: {
        src: "svg/couch.svg"
      },
      link:{
        title: "To zní dobře",
        href: "https://www.google.com/",
        color: "primary"
      }
    },
    {
      title: "innogy přepis energií",
      perex: "Jednoduše online",
      icon: {
        src: "svg/energy.svg"
      },
      link:{
        title: "To zní dobře",
        href: "https://www.google.com/",
        color: "primary"
      }
    }
  ]
}
} %}

          

<section class="base-section  --spacing-md    s-usps">
  <div class="base-section__container container">
        <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="50" height="50" viewBox="0 0 50 50">
  <g id="Shopping_Ecommerce_Calculator" data-name="Shopping, Ecommerce/Calculator" transform="translate(-8.98 -8.98)">
    <g id="Group" transform="translate(9.98 9.98)">
      <g id="Group-2" data-name="Group" transform="translate(0)">
        <path id="Path" d="M0,.5H8" transform="translate(31.467 39.5)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-2" data-name="Path" d="M0,.5H8" transform="translate(31.467 31.5)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-3" data-name="Path" d="M0,.5H48" transform="translate(0 23.5)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-4" data-name="Path" d="M48,41.739A6.262,6.262,0,0,1,41.739,48H6.261A6.261,6.261,0,0,1,0,41.739V6.261A6.261,6.261,0,0,1,6.261,0H41.739A6.262,6.262,0,0,1,48,6.261Z" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-5" data-name="Path" d="M0,.5H8" transform="translate(32 11.5)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-6" data-name="Path" d="M0,.5H8" transform="translate(8 11.5)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-7" data-name="Path" d="M.5,8V0" transform="translate(11.5 8)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-8" data-name="Path" d="M0,0,5.653,5.653" transform="translate(9.173 33.173)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-9" data-name="Path" d="M0,5.653,5.653,0" transform="translate(9.173 33.173)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-10" data-name="Path" d="M.5,0V48" transform="translate(23.5)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
      </g>
    </g>
  </g>
</svg>

  </span>
  </div>
  <div class="i-usp__content">
    <h3 class="i-usp__heading">20 792 Kč</h3>

          <div class="i-usp__perex">Předpokládaná měsíční splátka</div>
    
          <div class="i-usp__link">
        <a class="link --primary   --underline-initial" href="#" href="https://www.google.com/">
  <span class="link__title">
    <span class="link__title-wrap">To zní dobře</span>
  </span>

  </a>
      </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="66.001" height="50" viewBox="0 0 66.001 50">
  <g id="Furniture_Sofa_Chair" data-name="Furniture/Sofa, Chair" transform="translate(-5.653 -15.633)">
    <g id="Group" transform="translate(6.653 16.633)">
      <g id="Group-2" data-name="Group" transform="translate(0 0)">
        <path id="Path" d="M51.2,12.8H12.8v-8A4.8,4.8,0,0,0,8,0H4.8A4.8,4.8,0,0,0,0,4.8V19.2a6.4,6.4,0,0,0,6.4,6.4H57.6A6.4,6.4,0,0,0,64,19.2V4.8A4.8,4.8,0,0,0,59.2,0H56a4.8,4.8,0,0,0-4.8,4.8Z" transform="translate(0 16)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-2" data-name="Path" d="M.5,0V6.4" transform="translate(9.1 41.6)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-3" data-name="Path" d="M.5,0V6.4" transform="translate(53.9 41.6)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
        <path id="Path-4" data-name="Path" d="M0,16V9.6A9.6,9.6,0,0,1,9.6,0h32a9.6,9.6,0,0,1,9.6,9.6V16" transform="translate(6.4)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
      </g>
    </g>
  </g>
</svg>

  </span>
  </div>
  <div class="i-usp__content">
    <h3 class="i-usp__heading">250 000 Kč</h3>

          <div class="i-usp__perex">Třeba na vybavení domáctnosti</div>
    
          <div class="i-usp__link">
        <a class="link --primary   --underline-initial" href="#" href="https://www.google.com/">
  <span class="link__title">
    <span class="link__title-wrap">To zní dobře</span>
  </span>

  </a>
      </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="49.908" height="50.076" viewBox="0 0 49.908 50.076">
  <g id="Energy_Renewable_energy-electricity-renewable" data-name="Energy, Renewable/energy-electricity-renewable" transform="translate(-8.956 -8.854)">
    <g id="Group" transform="translate(9.98 9.892)">
      <path id="Path" d="M43.422,10.157A23.879,23.879,0,0,0,.394,28.19" transform="translate(0)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
      <path id="Path-2" data-name="Path" d="M0,5.317V0H5.317" transform="translate(3.789 37.843)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
      <path id="Path-3" data-name="Path" d="M0,18.032A23.879,23.879,0,0,0,43.028,0" transform="translate(4.438 19.81)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
      <path id="Path-4" data-name="Path" d="M5.317,0V5.317H0" transform="translate(38.753 4.84)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
      <path id="Path-5" data-name="Path" d="M6.194,17.705l4.44-8.853H0L4.44,0" transform="translate(18.613 15.147)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
    </g>
  </g>
</svg>

  </span>
  </div>
  <div class="i-usp__content">
    <h3 class="i-usp__heading">innogy přepis energií</h3>

          <div class="i-usp__perex">Jednoduše online</div>
    
          <div class="i-usp__link">
        <a class="link --primary   --underline-initial" href="#" href="https://www.google.com/">
  <span class="link__title">
    <span class="link__title-wrap">To zní dobře</span>
  </span>

  </a>
      </div>
      </div>
</div>
      </div>
    </div>
    </div>
</section>

Schema

    {
  "props": {
    "items": {
      "type": "array of objects",
      "description": "All props are documented by the component `usp-item`."
    }
  }
}