Star Rating

Size Variants

3 sizes: sm (16px stars), md (20px stars), lg (24px stars)

Different Ratings

Whole numbers and half-star increments

With Review Count

Optional review count in parentheses

<div class="elv-star-rating">
  <div class="elv-star-rating__stars">
    <!-- 4 full stars -->
    <svg class="elv-star-rating__star elv-star-rating__star--md" viewBox="0 0 24 24">
      <path d="..." fill="#FF492C"/>
    </svg>
    <!-- 1 half star -->
    <svg class="elv-star-rating__star elv-star-rating__star--md" viewBox="0 0 24 24">
      <g clip-path="url(#clip)">
        <path d="..." fill="#DFDFE2"/>
        <path d="..." fill="#FF492C"/>
      </g>
    </svg>
  </div>
  <span class="elv-star-rating__text">
    <span class="elv-star-rating__value elv-star-rating__value--md">4.5 out of 5</span>
    <span class="elv-star-rating__count elv-star-rating__value--md">(1,234)</span>
  </span>
</div>

In Context

Common usage in product cards and reviews

Usage Guidelines

• Size Selection: Use sm for compact cards, md for standard displays, lg for prominent ratings
• Review Count: Always include review count to build trust and provide context
• Rounding: Round to nearest 0.5 (half-star increment)
• Format: Display as "X out of 5" for clarity
• Readonly: This component is display-only (not interactive rating input)

Accessibility Notes

• ARIA: Add role="img" and aria-label to star container
• Text Alternative: The "X out of 5" text provides screen reader context
• Decorative: Stars are decorative when text value is present
• Color Independence: Rating value doesn't rely solely on color (text included)

<div class="elv-star-rating">
  <div class="elv-star-rating__stars" role="img" aria-label="Rated 4.5 out of 5 stars">
    <!-- stars -->
  </div>
  <span class="elv-star-rating__text">
    <span class="elv-star-rating__value">4.5 out of 5</span>
    <span class="elv-star-rating__count">(1,234 reviews)</span>
  </span>
</div>

Design System Specs