---
title: Star Ratings
page-header: Star Ratings
page-libs: [tabler-flags, star-rating.js]
page-menu: base.stars-rating
layout: default
permalink: stars-rating.html
---

<div class="row row-cards">
	<div class="col-md-4">
		<div class="row row-cards">
			<div class="col-12">
				<div class="card">
					<div class="card-body">
						<div class="h3 card-title">Basic</div>
						<div>{% include "ui/rating.html" value=4 %}</div>
					</div>
				</div>
			</div>
			<div class="col-12">
				<div class="card">
					<div class="card-body">
						<div class="h3 card-title">Different icon</div>
						<div class="space-y">
							{% include "ui/rating.html" value=4 %}
							{% include "ui/rating.html" icon="heart" value=4 color="red" %}
							{% include "ui/rating.html" icon="ghost" value=4 color="azure" %}
							{% include "ui/rating.html" icon="circle" value=4 color="green" %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card">
			<div class="card-body">
				<div class="h3 card-title">Custom colors</div>
				<div class="space-y">
					{% include "ui/rating.html" id="color" value=3 %}
					{% include "ui/rating.html" id="color-primary" color="primary" value=3 %}
					{% include "ui/rating.html" id="color-red" color="red" value=3 %}
					{% include "ui/rating.html" id="color-lime" color="lime" value=3 %}
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card">
			<div class="card-body">
				<div class="h3 card-title">Custom sizes</div>
				<div class="space-y">
					{% include "ui/rating.html" id="size-sm" value=3 size="sm" %}
					{% include "ui/rating.html" id="size-primary" value=3 %}
					{% include "ui/rating.html" id="size-md" value=3 size="md" %}
					{% include "ui/rating.html" id="size-lg" value=3 size="lg" %}
				</div>
			</div>
		</div>
	</div>
</div>