Dependencies
Uses:Star Icons
Click on the icons, to copy the code and use the correct icons for the ratings component. Check the icon library for a full searchable list of icons.
Star Ratings
Using the icon component, display a row of star icons to visually represent a rating. See above for icons used in this component.
<!-- Example 3.5 Rating -->
<div class="c-ratings" aria-label="3.5 out of 5 Stars">
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--half-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="nonzero" d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0ZM8 3.295l1.36 3.136a.75.75 0 0 0 .59.359l3.386.228-2.531 2.125a.75.75 0 0 0-.18.657l.68 3.282c-1.96-1.212-2.967-1.827-3.02-1.845a.75.75 0 0 0-.282-.056c-.001 0-.003-2.629-.004-7.886Z"/>
</svg>
<svg class="c-icon c-icon--hollow-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
</div>Examples
Different examples of how the ratings can be used with content.
Average rating of 3.6.
Performance
Performance
<!-- Example 3.5 Rating -->
<div class="c-ratings" aria-label="3.5 out of 5 Stars">
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--half-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="nonzero" d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0ZM8 3.295l1.36 3.136a.75.75 0 0 0 .59.359l3.386.228-2.531 2.125a.75.75 0 0 0-.18.657l.68 3.282c-1.96-1.212-2.967-1.827-3.02-1.845a.75.75 0 0 0-.282-.056c-.001 0-.003-2.629-.004-7.886Z"/>
</svg>
<svg class="c-icon c-icon--hollow-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
</div><div class="c-ratings c-ratings--inline | u-mr-sm">
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--half-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="nonzero" d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0ZM8 3.295l1.36 3.136a.75.75 0 0 0 .59.359l3.386.228-2.531 2.125a.75.75 0 0 0-.18.657l.68 3.282c-1.96-1.212-2.967-1.827-3.02-1.845a.75.75 0 0 0-.282-.056c-.001 0-.003-2.629-.004-7.886Z"/>
</svg>
<svg class="c-icon c-icon--hollow-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
</div>
<p>Average rating of <span class="c-badge c-badge c-badge--lg | u-tc-heading">3.6</span>.</p><span class="u-heading u-fw-500 u-mb-xs">Performance</span>
<div class="c-ratings" aria-label="3.5 out of 5 rating for performance.">
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--half-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="nonzero" d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0ZM8 3.295l1.36 3.136a.75.75 0 0 0 .59.359l3.386.228-2.531 2.125a.75.75 0 0 0-.18.657l.68 3.282c-1.96-1.212-2.967-1.827-3.02-1.845a.75.75 0 0 0-.282-.056c-.001 0-.003-2.629-.004-7.886Z"/>
</svg>
<svg class="c-icon c-icon--hollow-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
</div><span class="u-heading u-fw-500 u-mb-xs">Performance</span>
<div class="c-ratings" aria-label="6.5 out of 10 rating for performance.">
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"/>
</svg>
<svg class="c-icon c-icon--half-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="nonzero" d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0ZM8 3.295l1.36 3.136a.75.75 0 0 0 .59.359l3.386.228-2.531 2.125a.75.75 0 0 0-.18.657l.68 3.282c-1.96-1.212-2.967-1.827-3.02-1.845a.75.75 0 0 0-.282-.056c-.001 0-.003-2.629-.004-7.886Z"/>
</svg>
<svg class="c-icon c-icon--hollow-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
<svg class="c-icon c-icon--hollow-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
<svg class="c-icon c-icon--hollow-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
</div>Add/Remove Favourites Button
Add and remove favourites button, used on vehicle pages.
<button class="c-btn c-btn--tertiary t-btn-fav" x-data="{ fav: false }" @click="fav = ! fav" :class="fav ? 'is-active' : 'is-inactive'">
<span class="u-hidden" x-show.important="fav == true" style="display: none">Remove from Favourites</span>
<span class="u-hidden" x-show.important="fav != true">Add to Favourites</span>
<svg class="c-icon t-star-remove" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav == true" style="display: none">
<path stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
<path fill-rule="nonzero" d="M7.31 1.103a.75.75 0 0 1 1.378 0l1.82 4.221 4.793.324a.75.75 0 0 1 .505 1.252l-.075.072L13.304 9H9.499a3.5 3.5 0 0 0-3.495 3.308L6 12.5c0 .488.1.953.28 1.375l-2.25 1.389a.75.75 0 0 1-1.142-.685l.013-.1.909-4.549L.27 6.972a.75.75 0 0 1 .327-1.31L.7 5.648l4.792-.324 1.82-4.22Z"/>
</svg>
<svg class="c-icon t-star-add" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav != true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
<path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
</g>
</svg>
</button>