Rating item

    • *
    • *
    • *
    • *
    • * 
  •         {% include "@Components/items/rating-item/rating-item.twig" with {
    props: {
      stars: {
          percentage: "85"
        }
    }
  }
%}

      
  •           <div class="i-rating">
    <div class="i-rating__content">
        <ul class="g-rating__stars" data-percentage="85">
            <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-full.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <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-full.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>

    </div>

Rating item large

    • *
    • *
    • *
    • *
    • * 
  •         {% include "@Components/items/rating-item/rating-item.twig" with {
	props: {
		stars: {
			percentage: "85",
			setting: {
				size: "lg"
			}
		}
	}
} %}

      
  •           <div class="i-rating">
    <div class="i-rating__content">
        <ul class="g-rating__stars" data-percentage="85">
            <li>
                            <div class="i-star">
            <span class="icon  --lg">
      <img src="images/svg/star-full.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <li>
                            <div class="i-star">
            <span class="icon  --lg">
      <img src="images/svg/star-full.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <li>
                            <div class="i-star">
            <span class="icon  --lg">
      <img src="images/svg/star-full.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <li>
                            <div class="i-star">
            <span class="icon  --lg">
      <img src="images/svg/star-full.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <li>
                            <div class="i-star">
            <span class="icon  --lg">
      <img src="images/svg/star-empty.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
    </ul>
            </div>

    </div>

Rating item with legend

    • *
    • *
    • *
    • *
    • *
    934 hlasů 
  •         {% include "@Components/items/rating-item/rating-item.twig" with {
	props: {
		stars: {
			percentage: "85"
		},
		legend: {
			votes: "934",
			label: "hlasů"
		}
	}
} %}

      
  •           <div class="i-rating">
    <div class="i-rating__content">
        <ul class="g-rating__stars" data-percentage="85">
            <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-full.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <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-full.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>

Rating item with large legend

    • *
    • *
    • *
    • *
    • *
    85 % 
  •         {% include "@Components/items/rating-item/rating-item.twig" with {
	props: {
		stars: {
			percentage: "85"
		},
		legend: {
			votes: "85",
			label: "%",
			variant: "large"
		}
	}
} %}

      
  •           <div class="i-rating">
    <div class="i-rating__content">
        <ul class="g-rating__stars" data-percentage="85">
            <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-full.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <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-full.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 --large">
                                    <span>85</span>
                                                    <span>%</span>
                            </div>
            </div>

    </div>

Rating item with caption

    • *
    • *
    • *
    • *
    • *

    Průměr hodnocení makléřů

  •         {% include "@Components/items/rating-item/rating-item.twig" with {
	props: {
		stars: {
			percentage: "85"
		},
		caption:"Průměr hodnocení makléřů"
	}
} %}

      
  •           <div class="i-rating">
    <div class="i-rating__content">
        <ul class="g-rating__stars" data-percentage="85">
            <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-full.svg" alt="*" loading="lazy">
  
  </span>
    </div>
                    </li>
            <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-full.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>

            <p class="i-rating__caption">Průměr hodnocení makléřů</p>
    </div>

Schema 

    {
  "props": {
    "stars": {
      "percentage":{
        "type": "number",
        "description": "Score in pergentage, just number example:`80`."
      },
      "setting": {
        "type": "array of objects",
        "description": "All props are documented by the component `img`."
    },
    "legend": {
      "votes":{
        "type": "number",
        "description": "Number of legend, just number example:`80`."
      },
      "label": {
        "type": "string",
        "description": "Label of legend"
      },
      "variant": {
        "type": "string",
        "description": "large | undefined"
      }
    },
    "caption": {
      "type": "string",
      "description": "Caption of item"
    }
    }
  }
}