Highlighted broker item

  •         {% include "@Components/items/highlighted-broker-item/highlighted-broker-item.twig" with {
    props: {
      name: "Jakub Danovič",
      url: "#",
      img: {
        src: "images/examples/fashion-168x168.jpeg",
        ratio: "1-1",
        extraClass:"i-highlighted-broker__img"
      },
      rating: {
        stars: {
          percentage:"30"
        },
        legend: {
          votes:"934",
          label:"hlasů"
        }
      },
      metas:[{
          number: "777257283"
        },{
          email: "mailto"
        },{
          url: "#"
        }],
      real_estate_img: {
        "src":"images/content/bidli.png"
      },
      button: {
        title: "Detail"
      }
    }
  }
%}

      
  •           <article class="i-highlighted-broker">

  <a href="#" class="i-highlighted-broker__image-link u-img-hover">
    <div class="img  --ratio-1-1  i-highlighted-broker__img">
      <picture>
    
    <img src="" data-src="images/examples/fashion-168x168.jpeg" alt="" draggable="false">
  </picture>
</div>
  </a>

  <div class="i-highlighted-broker__content">

    <h3 class="base-h3 i-highlighted-broker__heading">
      <a href="#" title="Jakub Danovič">Jakub Danovič</a>
    </h3>

          <div class="i-rating">
    <div class="i-rating__content">
        <ul class="g-rating__stars" data-percentage="30">
            <li>
                            <div class="i-star">
            <span class="icon">
      <img src="images/svg/star-full.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <li>
                            <div class="i-star">
            <span class="icon">
      <img src="images/svg/star-half.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <li>
                            <div class="i-star">
            <span class="icon">
      <img src="images/svg/star-empty.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <li>
                            <div class="i-star">
            <span class="icon">
      <img src="images/svg/star-empty.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <li>
                            <div class="i-star">
            <span class="icon">
      <img src="images/svg/star-empty.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
    </ul>
                    <div class="i-rating__legend">
                                    <span>934</span>
                                                    <span>hlasů</span>
                            </div>
            </div>

    </div>
    
    <ul class="g-broker-meta">

      <li>
        
  <a class="i-broker-meta" href="tel:+777257283">
  <span class="icon  --sm">
      <img src="images/svg/phone.svg" alt="Telefon" loading="lazy">
  
  </span>
</a>
    </li>
      <li>
          <a class="i-broker-meta" href="mailto:mailto">
  <span class="icon  --sm">
      <img src="images/svg/mail.svg" alt="Email" loading="lazy">
  
  </span>
</a>
    </li>
      <li>
          <a class="i-broker-meta" href="#">
  <span class="icon  --sm">
      <img src="images/svg/link.svg" alt="www" loading="lazy">
  
  </span>
</a>
    </li>
  </ul>

    <div class="i-highlighted-broker__bottom-part">
      <div class="img --contain   real-estate-img">
      <picture>
    
    <img src="" data-src="images/content/bidli.png" alt="" draggable="false">
  </picture>
</div>

      <a class="btn --conversion --small" href='#'>    <span class="btn__title ">Detail</span>
      </a>

    </div>
  </div>
</article>

Schema 

    {
  "props": {
    "name": {
      "type": "string",
      "description": "Name of broker"
    },
    "url": {
      "type": "string",
      "description": "Url of broker"
    },
      "img":{
      "type": "object",
      "description": "All props are documented by the component `img`."
    },
      "rating": {
        "type": "object",
        "description": "All props are documented by the component `rating-item`."
      },
      "metas":{
        "type": "array of objects",
        "description": "All props are documented by the component `broker-meta-item`."
      },
      "real_estate_img": {
        "src":{
          "type": "string",
          "description": "Path to img"
        }
      },
      "button": {
        "title":{
          "type": "string",
          "description": "Title od btn"
        }
      }
  }
}