|$ curl https://forge-ai.dev/api/markdown?path=docs/components/rating

$cat docs/rating.md

updated Recently·16 min read·published

Rating

◆CSS◆HTML◆Tailwind◆Bootstrap◆UI◆Interactive◆Intermediate🎯Free Tools

Introduction

Rating components let users view or provide a score. This guide covers production-ready patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including five-star display, half-star precision, interactive selection, custom SVG icons, sizes, review breakdowns, color variants, and accessibility.

ℹ

info

Always pair star visuals with a visible numeric score or an aria-label describing the value. Color-blind users may not distinguish filled stars from empty ones.

Basic Star Rating

Standard five-star rating display using a CSS custom property --rating with a linear gradient. Filled stars indicate the score, empty stars show the remaining range. Pure CSS with no JavaScript required for read-only display.

basic-star-rating

Live

untitled.html

HTML

1	<div class="rating-demo">
2	<div class="rating-group">
3	<span class="stars" style="--rating:5" aria-label="5 out of 5 stars">
4	★★★★★
5	</span>
6	<span class="rating-value">
7	5.0
8	</span>
9	<span class="rating-text">
10	Excellent
11	</span>
12	</div>
13	<div class="rating-group">
14	<span class="stars" style="--rating:4" aria-label="4 out of 5 stars">
15	★★★★★
16	</span>
17	<span class="rating-value">
18	4.0
19	</span>
20	<span class="rating-text">
21	Very Good
22	</span>
23	</div>
24	<div class="rating-group">
25	<span class="stars" style="--rating:3" aria-label="3 out of 5 stars">
26	★★★★★
27	</span>
28	<span class="rating-value">
29	3.0
30	</span>
31	<span class="rating-text">
32	Good
33	</span>
34	</div>
35	<div class="rating-group">
36	<span class="stars" style="--rating:2.5" aria-label="2.5 out of 5 stars">
37	★★★★★
38	</span>
39	<span class="rating-value">
40	2.5
41	</span>
42	<span class="rating-text">
43	Fair
44	</span>
45	</div>
46	<div class="rating-group">
47	<span class="stars" style="--rating:1" aria-label="1 out of 5 stars">
48	★★★★★
49	</span>
50	<span class="rating-value">
51	1.0
52	</span>
53	<span class="rating-text">
54	Poor
55	</span>
56	</div>
57	</div>

untitled.html

HTML

1	<div class="flex flex-col gap-2 p-6 bg-[#0A0A0A] font-sans">
2	<div class="flex items-center gap-3">
3	<span class="text-[18px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#00FF41 100%,#333 100%)" aria-label="5 out of 5 stars">
4	★★★★★
5	</span>
6	<span class="text-[13px] font-semibold text-[#E0E0E0] min-w-[24px]">
7	5.0
8	</span>
9	<span class="text-[12px] text-[#808080] min-w-[80px]">
10	Excellent
11	</span>
12	</div>
13	<div class="flex items-center gap-3">
14	<span class="text-[18px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#00FF41 80%,#333 80%)" aria-label="4 out of 5 stars">
15	★★★★★
16	</span>
17	<span class="text-[13px] font-semibold text-[#E0E0E0] min-w-[24px]">
18	4.0
19	</span>
20	<span class="text-[12px] text-[#808080] min-w-[80px]">
21	Very Good
22	</span>
23	</div>
24	<div class="flex items-center gap-3">
25	<span class="text-[18px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#00FF41 60%,#333 60%)" aria-label="3 out of 5 stars">
26	★★★★★
27	</span>
28	<span class="text-[13px] font-semibold text-[#E0E0E0] min-w-[24px]">
29	3.0
30	</span>
31	<span class="text-[12px] text-[#808080] min-w-[80px]">
32	Good
33	</span>
34	</div>
35	<div class="flex items-center gap-3">
36	<span class="text-[18px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#00FF41 50%,#333 50%)" aria-label="2.5 out of 5 stars">
37	★★★★★
38	</span>
39	<span class="text-[13px] font-semibold text-[#E0E0E0] min-w-[24px]">
40	2.5
41	</span>
42	<span class="text-[12px] text-[#808080] min-w-[80px]">
43	Fair
44	</span>
45	</div>
46	<div class="flex items-center gap-3">
47	<span class="text-[18px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#00FF41 20%,#333 20%)" aria-label="1 out of 5 stars">
48	★★★★★
49	</span>
50	<span class="text-[13px] font-semibold text-[#E0E0E0] min-w-[24px]">
51	1.0
52	</span>
53	<span class="text-[12px] text-[#808080] min-w-[80px]">
54	Poor
55	</span>
56	</div>
57	</div>

untitled.html

HTML

1	<div class="d-flex flex-column gap-2 p-4">
2	<div class="d-flex align-items-center gap-3">
3	<span style="font-size:18px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 100%,#333 100%);-webkit-background-clip:text;background-clip:text" aria-label="5 out of 5 stars">
4	★★★★★
5	</span>
6	<span class="fw-semibold text-light" style="font-size:13px;min-width:24px">
7	5.0
8	</span>
9	<span class="text-secondary" style="font-size:12px;min-width:80px">
10	Excellent
11	</span>
12	</div>
13	<div class="d-flex align-items-center gap-3">
14	<span style="font-size:18px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 80%,#333 80%);-webkit-background-clip:text;background-clip:text" aria-label="4 out of 5 stars">
15	★★★★★
16	</span>
17	<span class="fw-semibold text-light" style="font-size:13px;min-width:24px">
18	4.0
19	</span>
20	<span class="text-secondary" style="font-size:12px;min-width:80px">
21	Very Good
22	</span>
23	</div>
24	<div class="d-flex align-items-center gap-3">
25	<span style="font-size:18px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 60%,#333 60%);-webkit-background-clip:text;background-clip:text" aria-label="3 out of 5 stars">
26	★★★★★
27	</span>
28	<span class="fw-semibold text-light" style="font-size:13px;min-width:24px">
29	3.0
30	</span>
31	<span class="text-secondary" style="font-size:12px;min-width:80px">
32	Good
33	</span>
34	</div>
35	<div class="d-flex align-items-center gap-3">
36	<span style="font-size:18px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 50%,#333 50%);-webkit-background-clip:text;background-clip:text" aria-label="2.5 out of 5 stars">
37	★★★★★
38	</span>
39	<span class="fw-semibold text-light" style="font-size:13px;min-width:24px">
40	2.5
41	</span>
42	<span class="text-secondary" style="font-size:12px;min-width:80px">
43	Fair
44	</span>
45	</div>
46	<div class="d-flex align-items-center gap-3">
47	<span style="font-size:18px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 20%,#333 20%);-webkit-background-clip:text;background-clip:text" aria-label="1 out of 5 stars">
48	★★★★★
49	</span>
50	<span class="fw-semibold text-light" style="font-size:13px;min-width:24px">
51	1.0
52	</span>
53	<span class="text-secondary" style="font-size:12px;min-width:80px">
54	Poor
55	</span>
56	</div>
57	</div>

preview

Interactive Rating

Clickable star rating with hover preview. Hovering over a star highlights all stars up to that position. Clicking sets the value and displays a text label. Uses inline SVG stars and the ARIA radio group pattern for accessibility.

interactive-rating

Live

untitled.html

HTML

1	<div class="interactive-rating-wrap">
2	<div class="star-rating" id="star-rating" role="radiogroup" aria-label="Rate this product">
3	<button class="star" data-value="1" aria-label="1 star" role="radio" aria-checked="false">
4	<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
5	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
6	</svg>
7	</button>
8	<button class="star" data-value="2" aria-label="2 stars" role="radio" aria-checked="false">
9	<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
10	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
11	</svg>
12	</button>
13	<button class="star" data-value="3" aria-label="3 stars" role="radio" aria-checked="false">
14	<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
15	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
16	</svg>
17	</button>
18	<button class="star" data-value="4" aria-label="4 stars" role="radio" aria-checked="false">
19	<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
20	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
21	</svg>
22	</button>
23	<button class="star" data-value="5" aria-label="5 stars" role="radio" aria-checked="false">
24	<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
25	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
26	</svg>
27	</button>
28	</div>
29	<p class="rating-label" id="rating-output">
30	Click a star to rate
31	</p>
32	</div>

untitled.html

HTML

1	<div class="flex flex-col items-center gap-3 p-6 bg-[#0A0A0A] font-sans">
2	<div class="flex gap-1" id="tw-rating" role="radiogroup" aria-label="Rate this product">
3	<button class="star p-0.5 text-[#333] hover:text-[#00FF41] hover:scale-115 transition-all" data-value="1" aria-label="1 star" role="radio" aria-checked="false">
4	<svg class="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
5	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
6	</svg>
7	</button>
8	<button class="star p-0.5 text-[#333] hover:text-[#00FF41] hover:scale-115 transition-all" data-value="2" aria-label="2 stars" role="radio" aria-checked="false">
9	<svg class="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
10	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
11	</svg>
12	</button>
13	<button class="star p-0.5 text-[#333] hover:text-[#00FF41] hover:scale-115 transition-all" data-value="3" aria-label="3 stars" role="radio" aria-checked="false">
14	<svg class="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
15	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
16	</svg>
17	</button>
18	<button class="star p-0.5 text-[#333] hover:text-[#00FF41] hover:scale-115 transition-all" data-value="4" aria-label="4 stars" role="radio" aria-checked="false">
19	<svg class="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
20	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
21	</svg>
22	</button>
23	<button class="star p-0.5 text-[#333] hover:text-[#00FF41] hover:scale-115 transition-all" data-value="5" aria-label="5 stars" role="radio" aria-checked="false">
24	<svg class="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
25	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
26	</svg>
27	</button>
28	</div>
29	<p class="text-xs text-[#808080] text-center min-h-[18px]" id="tw-output">
30	Click a star to rate
31	</p>
32	</div>

untitled.html

HTML

1	<div class="d-flex flex-column align-items-center gap-3 p-4">
2	<div class="d-flex gap-1" id="bs-rating" role="radiogroup" aria-label="Rate this product">
3	<button class="btn btn-link p-1 text-secondary bs-star" data-value="1" aria-label="1 star" role="radio" aria-checked="false" style="color:#333;transition:color .15s,transform .15s">
4	<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
5	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
6	</svg>
7	</button>
8	<button class="btn btn-link p-1 text-secondary bs-star" data-value="2" aria-label="2 stars" role="radio" aria-checked="false" style="color:#333;transition:color .15s,transform .15s">
9	<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
10	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
11	</svg>
12	</button>
13	<button class="btn btn-link p-1 text-secondary bs-star" data-value="3" aria-label="3 stars" role="radio" aria-checked="false" style="color:#333;transition:color .15s,transform .15s">
14	<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
15	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
16	</svg>
17	</button>
18	<button class="btn btn-link p-1 text-secondary bs-star" data-value="4" aria-label="4 stars" role="radio" aria-checked="false" style="color:#333;transition:color .15s,transform .15s">
19	<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
20	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
21	</svg>
22	</button>
23	<button class="btn btn-link p-1 text-secondary bs-star" data-value="5" aria-label="5 stars" role="radio" aria-checked="false" style="color:#333;transition:color .15s,transform .15s">
24	<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
25	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
26	</svg>
27	</button>
28	</div>
29	<p class="text-secondary text-center mb-0" style="font-size:12px;min-height:18px" id="bs-output">
30	Click a star to rate
31	</p>
32	</div>

preview

Half-Star Precision

Half-star ratings for more precise scoring. Each star splits into two clickable halves using CSS clip-path. The left half sets a .5 value, the right half sets the full integer, giving 10 discrete rating levels.

half-star-rating

Live

untitled.html

HTML

1	<div class="half-demo">
2	<div class="half-stars" id="half-rating" aria-label="Rate 3.5 out of 5">
3	<button class="half-star left" data-val="0.5" aria-label="0.5">
4	★
5	</button>
6	<button class="half-star right" data-val="1" aria-label="1">
7	★
8	</button>
9	<button class="half-star left" data-val="1.5" aria-label="1.5">
10	★
11	</button>
12	<button class="half-star right" data-val="2" aria-label="2">
13	★
14	</button>
15	<button class="half-star left active" data-val="2.5" aria-label="2.5">
16	★
17	</button>
18	<button class="half-star right active" data-val="3" aria-label="3">
19	★
20	</button>
21	<button class="half-star left active" data-val="3.5" aria-label="3.5">
22	★
23	</button>
24	<button class="half-star right" data-val="4" aria-label="4">
25	★
26	</button>
27	<button class="half-star left" data-val="4.5" aria-label="4.5">
28	★
29	</button>
30	<button class="half-star right" data-val="5" aria-label="5">
31	★
32	</button>
33	</div>
34	<p class="half-output">
35	3.5 / 5
36	</p>
37	</div>

untitled.html

HTML

1	<div class="flex flex-col items-center gap-3 p-6 bg-[#0A0A0A] font-sans">
2	<div class="flex text-2xl leading-none" id="tw-half" aria-label="Rate 3.5 out of 5">
3	<button class="w-[14px] overflow-hidden p-0 bg-transparent border-none text-[#333] hover:text-[#00FF41] transition-colors" style="clip-path:inset(0 50% 0 0)" data-val="0.5" aria-label="0.5">
4	★
5	</button>
6	<button class="w-[14px] overflow-hidden p-0 bg-transparent border-none text-[#333] hover:text-[#00FF41] transition-colors -ml-[14px]" style="clip-path:inset(0 0 0 50%)" data-val="1" aria-label="1">
7	★
8	</button>
9	<button class="w-[14px] overflow-hidden p-0 bg-transparent border-none text-[#333] hover:text-[#00FF41] transition-colors" style="clip-path:inset(0 50% 0 0)" data-val="1.5" aria-label="1.5">
10	★
11	</button>
12	<button class="w-[14px] overflow-hidden p-0 bg-transparent border-none text-[#333] hover:text-[#00FF41] transition-colors -ml-[14px]" style="clip-path:inset(0 0 0 50%)" data-val="2" aria-label="2">
13	★
14	</button>
15	<button class="w-[14px] overflow-hidden p-0 bg-transparent border-none text-[#00FF41] hover:text-[#00FF41] transition-colors" style="clip-path:inset(0 50% 0 0)" data-val="2.5" aria-label="2.5">
16	★
17	</button>
18	<button class="w-[14px] overflow-hidden p-0 bg-transparent border-none text-[#00FF41] hover:text-[#00FF41] transition-colors -ml-[14px]" style="clip-path:inset(0 0 0 50%)" data-val="3" aria-label="3">
19	★
20	</button>
21	<button class="w-[14px] overflow-hidden p-0 bg-transparent border-none text-[#00FF41] hover:text-[#00FF41] transition-colors" style="clip-path:inset(0 50% 0 0)" data-val="3.5" aria-label="3.5">
22	★
23	</button>
24	<button class="w-[14px] overflow-hidden p-0 bg-transparent border-none text-[#333] hover:text-[#00FF41] transition-colors -ml-[14px]" style="clip-path:inset(0 0 0 50%)" data-val="4" aria-label="4">
25	★
26	</button>
27	<button class="w-[14px] overflow-hidden p-0 bg-transparent border-none text-[#333] hover:text-[#00FF41] transition-colors" style="clip-path:inset(0 50% 0 0)" data-val="4.5" aria-label="4.5">
28	★
29	</button>
30	<button class="w-[14px] overflow-hidden p-0 bg-transparent border-none text-[#333] hover:text-[#00FF41] transition-colors -ml-[14px]" style="clip-path:inset(0 0 0 50%)" data-val="5" aria-label="5">
31	★
32	</button>
33	</div>
34	<p class="text-sm font-semibold text-[#A0A0A0] mb-0" id="tw-half-output">
35	3.5 / 5
36	</p>
37	</div>

untitled.html

HTML

1	<div class="d-flex flex-column align-items-center gap-3 p-4">
2	<div class="d-flex" style="font-size:24px;line-height:1" id="bs-half" aria-label="Rate 3.5 out of 5">
3	<button class="btn btn-link p-0" style="width:14px;overflow:hidden;clip-path:inset(0 50% 0 0);color:#333;padding:0" data-val="0.5" aria-label="0.5">
4	★
5	</button>
6	<button class="btn btn-link p-0" style="width:14px;overflow:hidden;clip-path:inset(0 0 0 50%);color:#333;margin-left:-14px;padding:0" data-val="1" aria-label="1">
7	★
8	</button>
9	<button class="btn btn-link p-0" style="width:14px;overflow:hidden;clip-path:inset(0 50% 0 0);color:#333;padding:0" data-val="1.5" aria-label="1.5">
10	★
11	</button>
12	<button class="btn btn-link p-0" style="width:14px;overflow:hidden;clip-path:inset(0 0 0 50%);color:#333;margin-left:-14px;padding:0" data-val="2" aria-label="2">
13	★
14	</button>
15	<button class="btn btn-link p-0" style="width:14px;overflow:hidden;clip-path:inset(0 50% 0 0);color:#00FF41;padding:0" data-val="2.5" aria-label="2.5">
16	★
17	</button>
18	<button class="btn btn-link p-0" style="width:14px;overflow:hidden;clip-path:inset(0 0 0 50%);color:#00FF41;margin-left:-14px;padding:0" data-val="3" aria-label="3">
19	★
20	</button>
21	<button class="btn btn-link p-0" style="width:14px;overflow:hidden;clip-path:inset(0 50% 0 0);color:#00FF41;padding:0" data-val="3.5" aria-label="3.5">
22	★
23	</button>
24	<button class="btn btn-link p-0" style="width:14px;overflow:hidden;clip-path:inset(0 0 0 50%);color:#333;margin-left:-14px;padding:0" data-val="4" aria-label="4">
25	★
26	</button>
27	<button class="btn btn-link p-0" style="width:14px;overflow:hidden;clip-path:inset(0 50% 0 0);color:#333;padding:0" data-val="4.5" aria-label="4.5">
28	★
29	</button>
30	<button class="btn btn-link p-0" style="width:14px;overflow:hidden;clip-path:inset(0 0 0 50%);color:#333;margin-left:-14px;padding:0" data-val="5" aria-label="5">
31	★
32	</button>
33	</div>
34	<p class="mb-0 text-secondary" style="font-size:14px;font-weight:600" id="bs-half-output">
35	3.5 / 5
36	</p>
37	</div>

preview

Custom SVG Icons

Replace stars with inline SVG icons — hearts for favorites, thumbs for likes, or flames for trending. The gradient clip technique also works with text characters, but SVG icons stay crisp at every size and can be filled programmatically.

custom-icon-rating

Live

untitled.html

HTML

1	<div class="custom-rating-demo">
2	<div class="custom-group">
3	<span class="heart-stars" style="--rating:4" aria-label="4 out of 5">
4	♥♥♥♥♥
5	</span>
6	<span class="custom-label">
7	Favorite
8	</span>
9	</div>
10	<div class="custom-group">
11	<span class="svg-hearts" aria-label="4 out of 5">
12	<svg viewBox="0 0 24 24" fill="#EF4444" width="20" height="20">
13	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
14	</svg>
15	<svg viewBox="0 0 24 24" fill="#EF4444" width="20" height="20">
16	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
17	</svg>
18	<svg viewBox="0 0 24 24" fill="#EF4444" width="20" height="20">
19	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
20	</svg>
21	<svg viewBox="0 0 24 24" fill="#EF4444" width="20" height="20">
22	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
23	</svg>
24	<svg viewBox="0 0 24 24" fill="#333" width="20" height="20">
25	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
26	</svg>
27	</span>
28	<span class="custom-label">
29	SVG Hearts
30	</span>
31	</div>
32	<div class="custom-group">
33	<span class="svg-thumbs" aria-label="3 out of 5">
34	<svg viewBox="0 0 24 24" fill="#3B82F6" width="20" height="20">
35	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
36	</svg>
37	<svg viewBox="0 0 24 24" fill="#3B82F6" width="20" height="20">
38	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
39	</svg>
40	<svg viewBox="0 0 24 24" fill="#3B82F6" width="20" height="20">
41	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
42	</svg>
43	<svg viewBox="0 0 24 24" fill="#333" width="20" height="20">
44	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
45	</svg>
46	<svg viewBox="0 0 24 24" fill="#333" width="20" height="20">
47	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
48	</svg>
49	</span>
50	<span class="custom-label">
51	Thumbs Up
52	</span>
53	</div>
54	<div class="custom-group">
55	<span class="svg-flames" aria-label="5 out of 5">
56	<svg viewBox="0 0 24 24" fill="#F97316" width="20" height="20">
57	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
58	</svg>
59	<svg viewBox="0 0 24 24" fill="#F97316" width="20" height="20">
60	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
61	</svg>
62	<svg viewBox="0 0 24 24" fill="#F97316" width="20" height="20">
63	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
64	</svg>
65	<svg viewBox="0 0 24 24" fill="#F97316" width="20" height="20">
66	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
67	</svg>
68	<svg viewBox="0 0 24 24" fill="#F97316" width="20" height="20">
69	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
70	</svg>
71	</span>
72	<span class="custom-label">
73	Trending
74	</span>
75	</div>
76	</div>

untitled.html

HTML

1	<div class="flex flex-col gap-3 p-6 bg-[#0A0A0A] font-sans">
2	<div class="flex items-center gap-3">
3	<span class="text-[20px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#EF4444 80%,#333 80%)" aria-label="4 out of 5">
4	♥♥♥♥♥
5	</span>
6	<span class="text-[11px] text-[#808080] uppercase tracking-[0.5px] font-medium">
7	Favorite
8	</span>
9	</div>
10	<div class="flex items-center gap-3">
11	<span class="flex gap-1" aria-label="4 out of 5">
12	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#EF4444">
13	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
14	</svg>
15	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#EF4444">
16	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
17	</svg>
18	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#EF4444">
19	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
20	</svg>
21	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#EF4444">
22	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
23	</svg>
24	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#333">
25	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
26	</svg>
27	</span>
28	<span class="text-[11px] text-[#808080] uppercase tracking-[0.5px] font-medium">
29	SVG Hearts
30	</span>
31	</div>
32	<div class="flex items-center gap-3">
33	<span class="flex gap-1" aria-label="3 out of 5">
34	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#3B82F6">
35	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
36	</svg>
37	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#3B82F6">
38	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
39	</svg>
40	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#3B82F6">
41	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
42	</svg>
43	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#333">
44	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
45	</svg>
46	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#333">
47	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
48	</svg>
49	</span>
50	<span class="text-[11px] text-[#808080] uppercase tracking-[0.5px] font-medium">
51	Thumbs Up
52	</span>
53	</div>
54	<div class="flex items-center gap-3">
55	<span class="flex gap-1" aria-label="5 out of 5">
56	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#F97316">
57	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
58	</svg>
59	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#F97316">
60	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
61	</svg>
62	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#F97316">
63	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
64	</svg>
65	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#F97316">
66	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
67	</svg>
68	<svg class="w-5 h-5" viewBox="0 0 24 24" fill="#F97316">
69	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
70	</svg>
71	</span>
72	<span class="text-[11px] text-[#808080] uppercase tracking-[0.5px] font-medium">
73	Trending
74	</span>
75	</div>
76	</div>

untitled.html

HTML

1	<div class="d-flex flex-column gap-3 p-4">
2	<div class="d-flex align-items-center gap-3">
3	<span style="font-size:20px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#EF4444 80%,#333 80%);-webkit-background-clip:text;background-clip:text" aria-label="4 out of 5">
4	♥♥♥♥♥
5	</span>
6	<span class="text-secondary text-uppercase fw-medium" style="font-size:11px;letter-spacing:.5px">
7	Favorite
8	</span>
9	</div>
10	<div class="d-flex align-items-center gap-3">
11	<span class="d-flex gap-1" aria-label="4 out of 5">
12	<svg width="20" height="20" viewBox="0 0 24 24" fill="#EF4444">
13	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
14	</svg>
15	<svg width="20" height="20" viewBox="0 0 24 24" fill="#EF4444">
16	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
17	</svg>
18	<svg width="20" height="20" viewBox="0 0 24 24" fill="#EF4444">
19	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
20	</svg>
21	<svg width="20" height="20" viewBox="0 0 24 24" fill="#EF4444">
22	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
23	</svg>
24	<svg width="20" height="20" viewBox="0 0 24 24" fill="#333">
25	<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
26	</svg>
27	</span>
28	<span class="text-secondary text-uppercase fw-medium" style="font-size:11px;letter-spacing:.5px">
29	SVG Hearts
30	</span>
31	</div>
32	<div class="d-flex align-items-center gap-3">
33	<span class="d-flex gap-1" aria-label="3 out of 5">
34	<svg width="20" height="20" viewBox="0 0 24 24" fill="#3B82F6">
35	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
36	</svg>
37	<svg width="20" height="20" viewBox="0 0 24 24" fill="#3B82F6">
38	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
39	</svg>
40	<svg width="20" height="20" viewBox="0 0 24 24" fill="#3B82F6">
41	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
42	</svg>
43	<svg width="20" height="20" viewBox="0 0 24 24" fill="#333">
44	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
45	</svg>
46	<svg width="20" height="20" viewBox="0 0 24 24" fill="#333">
47	<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91z"/>
48	</svg>
49	</span>
50	<span class="text-secondary text-uppercase fw-medium" style="font-size:11px;letter-spacing:.5px">
51	Thumbs Up
52	</span>
53	</div>
54	<div class="d-flex align-items-center gap-3">
55	<span class="d-flex gap-1" aria-label="5 out of 5">
56	<svg width="20" height="20" viewBox="0 0 24 24" fill="#F97316">
57	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
58	</svg>
59	<svg width="20" height="20" viewBox="0 0 24 24" fill="#F97316">
60	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
61	</svg>
62	<svg width="20" height="20" viewBox="0 0 24 24" fill="#F97316">
63	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
64	</svg>
65	<svg width="20" height="20" viewBox="0 0 24 24" fill="#F97316">
66	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
67	</svg>
68	<svg width="20" height="20" viewBox="0 0 24 24" fill="#F97316">
69	<path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.81 4.8z"/>
70	</svg>
71	</span>
72	<span class="text-secondary text-uppercase fw-medium" style="font-size:11px;letter-spacing:.5px">
73	Trending
74	</span>
75	</div>
76	</div>

preview

Sizes

Compact, default, large, and hero rating displays. Small ratings fit inline with product names in tables; large and hero ratings work as display elements on product detail pages and landing pages.

rating-sizes

Live

untitled.html

HTML

1	<div class="size-demo">
2	<div class="size-row">
3	<span class="stars sm" style="--rating:4" aria-label="4 stars">
4	★★★★★
5	</span>
6	<span class="size-label">
7	Small (12px)
8	</span>
9	</div>
10	<div class="size-row">
11	<span class="stars md" style="--rating:4" aria-label="4 stars">
12	★★★★★
13	</span>
14	<span class="size-label">
15	Default (18px)
16	</span>
17	</div>
18	<div class="size-row">
19	<span class="stars lg" style="--rating:4" aria-label="4 stars">
20	★★★★★
21	</span>
22	<span class="size-label">
23	Large (28px)
24	</span>
25	</div>
26	<div class="size-row">
27	<span class="stars xl" style="--rating:4" aria-label="4 stars">
28	★★★★★
29	</span>
30	<span class="size-label">
31	Hero (40px)
32	</span>
33	</div>
34	</div>

preview

With Review Breakdown

Pairing the star rating with a review count, average score, and rating distribution bar chart gives users full context. Common in product detail pages, app store listings, and marketplace reviews.

review-breakdown

Live

untitled.html

HTML

1	<div class="review-demo">
2	<div class="review-card">
3	<div class="review-header">
4	<span class="review-score">
5	4.7
6	</span>
7	<div class="review-meta">
8	<span class="stars" style="--rating:4.7" aria-label="4.7 stars">
9	★★★★★
10	</span>
11	<span class="review-count">
12	2,847 reviews
13	</span>
14	</div>
15	</div>
16	<div class="rating-bars">
17	<div class="bar-row">
18	<span class="bar-label">
19	5
20	</span>
21	<div class="bar-track">
22	<div class="bar-fill" style="width:68%">
23	</div>
24	</div>
25	<span class="bar-count">
26	1,936
27	</span>
28	</div>
29	<div class="bar-row">
30	<span class="bar-label">
31	4
32	</span>
33	<div class="bar-track">
34	<div class="bar-fill" style="width:20%">
35	</div>
36	</div>
37	<span class="bar-count">
38	569
39	</span>
40	</div>
41	<div class="bar-row">
42	<span class="bar-label">
43	3
44	</span>
45	<div class="bar-track">
46	<div class="bar-fill" style="width:7%">
47	</div>
48	</div>
49	<span class="bar-count">
50	199
51	</span>
52	</div>
53	<div class="bar-row">
54	<span class="bar-label">
55	2
56	</span>
57	<div class="bar-track">
58	<div class="bar-fill" style="width:3%">
59	</div>
60	</div>
61	<span class="bar-count">
62	85
63	</span>
64	</div>
65	<div class="bar-row">
66	<span class="bar-label">
67	1
68	</span>
69	<div class="bar-track">
70	<div class="bar-fill" style="width:2%">
71	</div>
72	</div>
73	<span class="bar-count">
74	58
75	</span>
76	</div>
77	</div>
78	</div>
79	</div>

untitled.html

HTML

1	<div class="p-6 bg-[#0A0A0A] font-sans">
2	<div class="max-w-[300px]">
3	<div class="flex gap-4 items-start mb-4">
4	<span class="text-[40px] font-extrabold text-[#E0E0E0] leading-none">
5	4.7
6	</span>
7	<div class="flex flex-col gap-1">
8	<span class="text-[14px] tracking-[1px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#00FF41 94%,#333 94%)" aria-label="4.7 stars">
9	★★★★★
10	</span>
11	<span class="text-[11px] text-[#808080]">
12	2,847 reviews
13	</span>
14	</div>
15	</div>
16	<div class="flex flex-col gap-1.5">
17	<div class="flex items-center gap-2">
18	<span class="text-[11px] text-[#808080] w-2.5 text-right">
19	5
20	</span>
21	<div class="flex-1 h-2 bg-[#1A1A1A] rounded overflow-hidden">
22	<div class="h-full bg-[#00FF41] rounded" style="width:68%">
23	</div>
24	</div>
25	<span class="text-[10px] text-[#666] min-w-[32px] text-right">
26	1,936
27	</span>
28	</div>
29	<div class="flex items-center gap-2">
30	<span class="text-[11px] text-[#808080] w-2.5 text-right">
31	4
32	</span>
33	<div class="flex-1 h-2 bg-[#1A1A1A] rounded overflow-hidden">
34	<div class="h-full bg-[#00FF41] rounded" style="width:20%">
35	</div>
36	</div>
37	<span class="text-[10px] text-[#666] min-w-[32px] text-right">
38	569
39	</span>
40	</div>
41	<div class="flex items-center gap-2">
42	<span class="text-[11px] text-[#808080] w-2.5 text-right">
43	3
44	</span>
45	<div class="flex-1 h-2 bg-[#1A1A1A] rounded overflow-hidden">
46	<div class="h-full bg-[#00FF41] rounded" style="width:7%">
47	</div>
48	</div>
49	<span class="text-[10px] text-[#666] min-w-[32px] text-right">
50	199
51	</span>
52	</div>
53	<div class="flex items-center gap-2">
54	<span class="text-[11px] text-[#808080] w-2.5 text-right">
55	2
56	</span>
57	<div class="flex-1 h-2 bg-[#1A1A1A] rounded overflow-hidden">
58	<div class="h-full bg-[#00FF41] rounded" style="width:3%">
59	</div>
60	</div>
61	<span class="text-[10px] text-[#666] min-w-[32px] text-right">
62	85
63	</span>
64	</div>
65	<div class="flex items-center gap-2">
66	<span class="text-[11px] text-[#808080] w-2.5 text-right">
67	1
68	</span>
69	<div class="flex-1 h-2 bg-[#1A1A1A] rounded overflow-hidden">
70	<div class="h-full bg-[#00FF41] rounded" style="width:2%">
71	</div>
72	</div>
73	<span class="text-[10px] text-[#666] min-w-[32px] text-right">
74	58
75	</span>
76	</div>
77	</div>
78	</div>
79	</div>

untitled.html

HTML

1	<div class="p-4">
2	<div style="max-width:300px">
3	<div class="d-flex gap-4 align-items-start mb-3">
4	<span class="fw-bold text-light" style="font-size:40px;line-height:1">
5	4.7
6	</span>
7	<div class="d-flex flex-column gap-1">
8	<span style="font-size:14px;letter-spacing:1px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 94%,#333 94%);-webkit-background-clip:text;background-clip:text" aria-label="4.7 stars">
9	★★★★★
10	</span>
11	<span class="text-secondary" style="font-size:11px">
12	2,847 reviews
13	</span>
14	</div>
15	</div>
16	<div class="d-flex flex-column gap-2">
17	<div class="d-flex align-items-center gap-2">
18	<span class="text-secondary text-end" style="font-size:11px;width:10px">
19	5
20	</span>
21	<div class="flex-grow-1 rounded overflow-hidden" style="height:8px;background:#1A1A1A">
22	<div class="h-100 rounded" style="width:68%;background:#00FF41">
23	</div>
24	</div>
25	<span class="text-secondary text-end" style="font-size:10px;min-width:32px">
26	1,936
27	</span>
28	</div>
29	<div class="d-flex align-items-center gap-2">
30	<span class="text-secondary text-end" style="font-size:11px;width:10px">
31	4
32	</span>
33	<div class="flex-grow-1 rounded overflow-hidden" style="height:8px;background:#1A1A1A">
34	<div class="h-100 rounded" style="width:20%;background:#00FF41">
35	</div>
36	</div>
37	<span class="text-secondary text-end" style="font-size:10px;min-width:32px">
38	569
39	</span>
40	</div>
41	<div class="d-flex align-items-center gap-2">
42	<span class="text-secondary text-end" style="font-size:11px;width:10px">
43	3
44	</span>
45	<div class="flex-grow-1 rounded overflow-hidden" style="height:8px;background:#1A1A1A">
46	<div class="h-100 rounded" style="width:7%;background:#00FF41">
47	</div>
48	</div>
49	<span class="text-secondary text-end" style="font-size:10px;min-width:32px">
50	199
51	</span>
52	</div>
53	<div class="d-flex align-items-center gap-2">
54	<span class="text-secondary text-end" style="font-size:11px;width:10px">
55	2
56	</span>
57	<div class="flex-grow-1 rounded overflow-hidden" style="height:8px;background:#1A1A1A">
58	<div class="h-100 rounded" style="width:3%;background:#00FF41">
59	</div>
60	</div>
61	<span class="text-secondary text-end" style="font-size:10px;min-width:32px">
62	85
63	</span>
64	</div>
65	<div class="d-flex align-items-center gap-2">
66	<span class="text-secondary text-end" style="font-size:11px;width:10px">
67	1
68	</span>
69	<div class="flex-grow-1 rounded overflow-hidden" style="height:8px;background:#1A1A1A">
70	<div class="h-100 rounded" style="width:2%;background:#00FF41">
71	</div>
72	</div>
73	<span class="text-secondary text-end" style="font-size:10px;min-width:32px">
74	58
75	</span>
76	</div>
77	</div>
78	</div>
79	</div>

preview

Color Variants

Match the rating to your brand or semantic intent — success green, info blue, warning yellow, danger red, and neutral gray. Each variant keeps the same accessible contrast against the dark background.

color-variants

Live

untitled.html

HTML

1	<div class="color-demo">
2	<div class="color-row">
3	<span class="stars success" style="--rating:4" aria-label="4 stars">
4	★★★★★
5	</span>
6	<span class="color-label">
7	Success
8	</span>
9	</div>
10	<div class="color-row">
11	<span class="stars info" style="--rating:4" aria-label="4 stars">
12	★★★★★
13	</span>
14	<span class="color-label">
15	Info
16	</span>
17	</div>
18	<div class="color-row">
19	<span class="stars warning" style="--rating:4" aria-label="4 stars">
20	★★★★★
21	</span>
22	<span class="color-label">
23	Warning
24	</span>
25	</div>
26	<div class="color-row">
27	<span class="stars danger" style="--rating:4" aria-label="4 stars">
28	★★★★★
29	</span>
30	<span class="color-label">
31	Danger
32	</span>
33	</div>
34	<div class="color-row">
35	<span class="stars neutral" style="--rating:4" aria-label="4 stars">
36	★★★★★
37	</span>
38	<span class="color-label">
39	Neutral
40	</span>
41	</div>
42	</div>

untitled.html

HTML

1	<div class="d-flex flex-column gap-2 p-4">
2	<div class="d-flex align-items-center gap-3">
3	<span style="font-size:20px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 80%,#1A2A1E 80%);-webkit-background-clip:text;background-clip:text" aria-label="4 stars">
4	★★★★★
5	</span>
6	<span class="text-secondary" style="font-size:12px;min-width:70px">
7	Success
8	</span>
9	</div>
10	<div class="d-flex align-items-center gap-3">
11	<span style="font-size:20px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#3B82F6 80%,#1A1A2E 80%);-webkit-background-clip:text;background-clip:text" aria-label="4 stars">
12	★★★★★
13	</span>
14	<span class="text-secondary" style="font-size:12px;min-width:70px">
15	Info
16	</span>
17	</div>
18	<div class="d-flex align-items-center gap-3">
19	<span style="font-size:20px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#EAB308 80%,#2A2510 80%);-webkit-background-clip:text;background-clip:text" aria-label="4 stars">
20	★★★★★
21	</span>
22	<span class="text-secondary" style="font-size:12px;min-width:70px">
23	Warning
24	</span>
25	</div>
26	<div class="d-flex align-items-center gap-3">
27	<span style="font-size:20px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#EF4444 80%,#2A1515 80%);-webkit-background-clip:text;background-clip:text" aria-label="4 stars">
28	★★★★★
29	</span>
30	<span class="text-secondary" style="font-size:12px;min-width:70px">
31	Danger
32	</span>
33	</div>
34	<div class="d-flex align-items-center gap-3">
35	<span style="font-size:20px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#A0A0A0 80%,#333 80%);-webkit-background-clip:text;background-clip:text" aria-label="4 stars">
36	★★★★★
37	</span>
38	<span class="text-secondary" style="font-size:12px;min-width:70px">
39	Neutral
40	</span>
41	</div>
42	</div>

preview

Rounded & Compact Chips

Compact rating chips with a pill shape work well in cards, tables, and list items where horizontal space is limited. They combine the score, star icon, and review count into a single inline element.

rounded-chips

Live

untitled.html

HTML

1	<div class="chip-demo">
2	<span class="rating-chip">
3	<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
4	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
5	</svg>
6	<span>
7	4.8
8	</span>
9	<span class="chip-count">
10	(128)
11	</span>
12	</span>
13	<span class="rating-chip outline">
14	<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
15	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
16	</svg>
17	<span>
18	3.5
19	</span>
20	</span>
21	<span class="rating-chip badge">
22	<svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor">
23	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
24	</svg>
25	<span>
26	Top Rated
27	</span>
28	</span>
29	</div>

preview

Read-Only vs Interactive

Side-by-side comparison of read-only (display only, no hover effects) and interactive (clickable, hover preview) ratings. Use pointer-events: none on read-only variants to prevent hover and click interactions.

read-only-vs-interactive

Live

untitled.html

HTML

1	<div class="compare-demo">
2	<div class="compare-col">
3	<span class="compare-label">
4	Read-Only
5	</span>
6	<span class="stars readonly" style="--rating:3.5" aria-label="3.5 stars">
7	★★★★★
8	</span>
9	<span class="compare-value">
10	3.5 — Good
11	</span>
12	</div>
13	<div class="compare-divider">
14	</div>
15	<div class="compare-col">
16	<span class="compare-label">
17	Interactive
18	</span>
19	<span class="stars interactive-stars" id="compare-stars" aria-label="Click to rate">
20	<button class="i-star on" data-value="1" aria-label="1 star">
21	★
22	</button>
23	<button class="i-star on" data-value="2" aria-label="2 stars">
24	★
25	</button>
26	<button class="i-star on" data-value="3" aria-label="3 stars">
27	★
28	</button>
29	<button class="i-star hoverable" data-value="4" aria-label="4 stars">
30	★
31	</button>
32	<button class="i-star hoverable" data-value="5" aria-label="5 stars">
33	★
34	</button>
35	</span>
36	<span class="compare-value" id="compare-output">
37	Click to rate
38	</span>
39	</div>
40	</div>

untitled.html

HTML

1	<div class="flex items-center justify-center gap-0 p-6 bg-[#0A0A0A] font-sans">
2	<div class="flex flex-col items-center gap-2 px-8">
3	<span class="text-[10px] text-[#555] uppercase tracking-[0.5px] font-semibold">
4	Read-Only
5	</span>
6	<span class="text-[20px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text pointer-events-none" style="background-image:linear-gradient(90deg,#00FF41 70%,#333 70%)" aria-label="3.5 stars">
7	★★★★★
8	</span>
9	<span class="text-[11px] text-[#808080]">
10	3.5 — Good
11	</span>
12	</div>
13	<div class="w-px h-[60px] bg-[#222]">
14	</div>
15	<div class="flex flex-col items-center gap-2 px-8">
16	<span class="text-[10px] text-[#555] uppercase tracking-[0.5px] font-semibold">
17	Interactive
18	</span>
19	<span class="flex gap-0.5" id="tw-compare" aria-label="Click to rate">
20	<button class="text-[20px] text-[#00FF41] hover:text-[#00FF41] hover:scale-115 transition-all bg-transparent border-none p-0 leading-none" data-value="1" aria-label="1 star">
21	★
22	</button>
23	<button class="text-[20px] text-[#00FF41] hover:text-[#00FF41] hover:scale-115 transition-all bg-transparent border-none p-0 leading-none" data-value="2" aria-label="2 stars">
24	★
25	</button>
26	<button class="text-[20px] text-[#00FF41] hover:text-[#00FF41] hover:scale-115 transition-all bg-transparent border-none p-0 leading-none" data-value="3" aria-label="3 stars">
27	★
28	</button>
29	<button class="text-[20px] text-[#333] hover:text-[#00FF41] hover:scale-115 transition-all bg-transparent border-none p-0 leading-none" data-value="4" aria-label="4 stars">
30	★
31	</button>
32	<button class="text-[20px] text-[#333] hover:text-[#00FF41] hover:scale-115 transition-all bg-transparent border-none p-0 leading-none" data-value="5" aria-label="5 stars">
33	★
34	</button>
35	</span>
36	<span class="text-[11px] text-[#808080]" id="tw-compare-output">
37	Click to rate
38	</span>
39	</div>
40	</div>

preview

CSS Gradient Technique

The star rating uses a CSS custom property --rating with a linear gradient and background-clip: text. The gradient fills stars proportionally based on the rating value — no JavaScript needed for read-only display.

star-rating.css

CSS

1	.stars {
2	--rating: 0;
3	--star-size: 18px;
4	--star-color: #333;
5	--star-fill: #00FF41;
6
7	font-size: var(--star-size);
8	letter-spacing: 2px;
9	line-height: 1;
10	color: var(--star-color);
11	background: linear-gradient(
12	90deg,
13	var(--star-fill) calc(var(--rating) / 5 * 100%),
14	var(--star-color) calc(var(--rating) / 5 * 100%)
15	);
16	-webkit-background-clip: text;
17	-webkit-text-fill-color: transparent;
18	background-clip: text;
19	display: inline-block;
20	}

ℹ

info

The CSS gradient technique is ideal for read-only ratings. For interactive ratings, use JavaScript to toggle classes and set aria-checkedon each star. Always provide a text fallback (e.g., "4.5 out of 5 stars") for screen readers.

✓

best practice

When using custom SVG icons, ensure the empty state is visible against the background. Use #333 on dark themes and #DDD on light backgrounds. SVG paths scale crisply at any size and do not depend on monospace character widths.

Accessibility

Rating components must communicate value and state to all users, including those using screen readers or keyboard navigation.

Always provide aria-label or visible text with the rating for accessibility.
Use role="radiogroup" and role="radio" with aria-checked for interactive ratings.
Display the numeric score alongside stars — color-blind users may not distinguish filled from empty.
For half-star ratings, ensure each half has a distinct click target and hover state.
Use pointer-events: none on read-only ratings to prevent hover effects.
On mobile, increase touch targets to at least 44×44px per star.
Consider showing a review breakdown (bar chart) alongside the average for transparency.
Ensure focus indicators are visible when navigating with a keyboard.

Best Practices

Keep the rating scale consistent — most products use 1–5 stars.
Use the same empty-state color across all rating instances in a view.
Debounce or throttle interactive rating submissions to avoid excessive API calls.
Persist the submitted rating visually so users know their input was recorded.
Avoid using color alone to convey meaning; pair it with labels or numeric scores.
Test custom SVG icons at 200% zoom to confirm they remain clear and aligned.

Community

Get help on Slack, Discord or VIP

Stuck on a guide? Join the community and ask.

Join Slack Join Discord Kaundal VIP

X GitHub YouTube Instagram Facebook Discord Slack Telegram Buy me a coffee Ko-fi Sponsor

1	const rating=document.getElementById('star-rating');
2	const output=document.getElementById('rating-output');
3	const labels=['Poor','Fair','Good','Very Good','Excellent'];
4	let selected=0;
5	rating.querySelectorAll('.star').forEach(star=>{
6	star.addEventListener('mouseenter',()=>{
7	const val=parseInt(star.dataset.value);
8	rating.querySelectorAll('.star').forEach((s,i)=>{
9	s.classList.toggle('hover',i<val);
10	});
11	});
12	star.addEventListener('mouseleave',()=>{
13	rating.querySelectorAll('.star').forEach(s=>s.classList.remove('hover'));
14	});
15	star.addEventListener('click',()=>{
16	selected=parseInt(star.dataset.value);
17	rating.querySelectorAll('.star').forEach((s,i)=>{
18	s.classList.toggle('active',i<selected);
19	s.setAttribute('aria-checked',i<selected?'true':'false');
20	});
21	output.textContent=selected+' star'+(selected!==1?'s':'')+' — '+labels[selected-1];
22	});
23	});

1	document.getElementById('half-rating').addEventListener('click',e=>{
2	const btn=e.target.closest('.half-star');
3	if(!btn)return;
4	const val=parseFloat(btn.dataset.val);
5	document.querySelectorAll('.half-star').forEach(s=>{
6	s.classList.toggle('active',parseFloat(s.dataset.val)<=val);
7	});
8	document.querySelector('.half-output').textContent=val+' / 5';
9	});

1	const cmp=document.getElementById('compare-stars');
2	const cmpOut=document.getElementById('compare-output');
3	const cmpLabels=['Poor','Fair','Good','Very Good','Excellent'];
4	let cmpSel=3;
5	cmp.querySelectorAll('.i-star').forEach(star=>{
6	star.addEventListener('mouseenter',()=>{
7	const v=parseInt(star.dataset.value);
8	cmp.querySelectorAll('.i-star').forEach((s,i)=>{s.classList.toggle('on',i<v);});
9	});
10	star.addEventListener('mouseleave',()=>{
11	cmp.querySelectorAll('.i-star').forEach((s,i)=>{s.classList.toggle('on',i<cmpSel);});
12	});
13	star.addEventListener('click',()=>{
14	cmpSel=parseInt(star.dataset.value);
15	cmp.querySelectorAll('.i-star').forEach((s,i)=>{s.classList.toggle('on',i<cmpSel);});
16	cmpOut.textContent=cmpSel+' / 5 — '+cmpLabels[cmpSel-1];
17	});
18	});

1	.rating-demo {
2	display:flex;
3	flex-direction:column;
4	gap:8px;
5	padding:20px 24px;
6	font-family:system-ui,
7	sans-serif;
8	background:#0A0A0A
9	}
10	.rating-group {
11	display:flex;
12	align-items:center;
13	gap:10px
14	}
15	.stars {
16	--rating:0;
17	--star-size:18px;
18	--star-color:#333;
19	--star-fill:#00FF41;
20	font-size:var(--star-size);
21	letter-spacing:2px;
22	line-height:1;
23	color:var(--star-color);
24	background:linear-gradient(90deg,
25	var(--star-fill) calc(var(--rating)/5*100%),
26	var(--star-color) calc(var(--rating)/5*100%));
27	-webkit-background-clip:text;
28	-webkit-text-fill-color:transparent;
29	background-clip:text;
30	display:inline-block;
31	font-style:normal
32	}
33	.rating-value {
34	font-size:13px;
35	color:#E0E0E0;
36	font-weight:600;
37	min-width:24px
38	}
39	.rating-text {
40	font-size:12px;
41	color:#808080;
42	min-width:80px
43	}

1	.interactive-rating-wrap {
2	display:flex;
3	flex-direction:column;
4	align-items:center;
5	gap:12px;
6	padding:24px;
7	font-family:system-ui,
8	sans-serif;
9	background:#0A0A0A
10	}
11	.star-rating {
12	display:flex;
13	gap:4px
14	}
15	.star {
16	background:none;
17	border:none;
18	padding:2px;
19	color:#333;
20	cursor:pointer;
21	transition:color .15s,
22	transform .15s;
23	line-height:1;
24	display:inline-flex
25	}
26	.star:hover {
27	transform:scale(1.15)
28	}
29	.star.active,
30	.star.hover {
31	color:#00FF41
32	}
33	.rating-label {
34	font-size:12px;
35	color:#808080;
36	margin:0;
37	text-align:center;
38	min-height:18px
39	}

1	.half-demo {
2	display:flex;
3	flex-direction:column;
4	align-items:center;
5	gap:12px;
6	padding:24px;
7	font-family:system-ui,
8	sans-serif;
9	background:#0A0A0A
10	}
11	.half-stars {
12	display:flex;
13	font-size:24px;
14	line-height:1
15	}
16	.half-star {
17	background:none;
18	border:none;
19	padding:0 1px;
20	cursor:pointer;
21	color:#333;
22	transition:color .1s;
23	line-height:1;
24	width:14px;
25	overflow:hidden
26	}
27	.half-star.left {
28	clip-path:inset(0 50% 0 0)
29	}
30	.half-star.right {
31	clip-path:inset(0 0 0 50%);
32	margin-left:-14px
33	}
34	.half-star.active,
35	.half-star:hover {
36	color:#00FF41
37	}
38	.half-output {
39	font-size:14px;
40	color:#A0A0A0;
41	font-weight:600;
42	margin:0
43	}

1	.custom-rating-demo {
2	display:flex;
3	flex-direction:column;
4	gap:12px;
5	padding:24px 24px;
6	font-family:system-ui,
7	sans-serif;
8	background:#0A0A0A
9	}
10	.custom-group {
11	display:flex;
12	align-items:center;
13	gap:12px
14	}
15	.heart-stars {
16	--rating:0;
17	--fill:#EF4444;
18	--empty:#333;
19	font-size:20px;
20	letter-spacing:2px;
21	line-height:1;
22	background:linear-gradient(90deg,
23	var(--fill) calc(var(--rating)/5*100%),
24	var(--empty) calc(var(--rating)/5*100%));
25	-webkit-background-clip:text;
26	-webkit-text-fill-color:transparent;
27	background-clip:text;
28	display:inline-block
29	}
30	.svg-hearts,
31	.svg-thumbs,
32	.svg-flames {
33	display:flex;
34	gap:4px
35	}
36	.custom-label {
37	font-size:11px;
38	color:#808080;
39	text-transform:uppercase;
40	letter-spacing:.5px;
41	font-weight:500
42	}

1	.size-demo {
2	display:flex;
3	flex-direction:column;
4	gap:12px;
5	padding:24px 24px;
6	font-family:system-ui,
7	sans-serif;
8	background:#0A0A0A
9	}
10	.size-row {
11	display:flex;
12	align-items:center;
13	gap:16px
14	}
15	.stars {
16	--rating:0;
17	--star-color:#333;
18	--star-fill:#00FF41;
19	letter-spacing:2px;
20	line-height:1;
21	background:linear-gradient(90deg,
22	var(--star-fill) calc(var(--rating)/5*100%),
23	var(--star-color) calc(var(--rating)/5*100%));
24	-webkit-background-clip:text;
25	-webkit-text-fill-color:transparent;
26	background-clip:text;
27	display:inline-block
28	}
29	.stars.sm {
30	font-size:12px
31	}
32	.stars.md {
33	font-size:18px
34	}
35	.stars.lg {
36	font-size:28px
37	}
38	.stars.xl {
39	font-size:40px;
40	letter-spacing:4px
41	}
42	.size-label {
43	font-size:12px;
44	color:#808080
45	}

1	<div class="flex flex-col gap-3 p-6 bg-[#0A0A0A] font-sans">
2	<div class="flex items-center gap-4">
3	<span class="text-[12px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#00FF41 80%,#333 80%)" aria-label="4 stars">
4	★★★★★
5	</span>
6	<span class="text-xs text-[#808080]">
7	Small (12px)
8	</span>
9	</div>
10	<div class="flex items-center gap-4">
11	<span class="text-[18px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#00FF41 80%,#333 80%)" aria-label="4 stars">
12	★★★★★
13	</span>
14	<span class="text-xs text-[#808080]">
15	Default (18px)
16	</span>
17	</div>
18	<div class="flex items-center gap-4">
19	<span class="text-[28px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#00FF41 80%,#333 80%)" aria-label="4 stars">
20	★★★★★
21	</span>
22	<span class="text-xs text-[#808080]">
23	Large (28px)
24	</span>
25	</div>
26	<div class="flex items-center gap-4">
27	<span class="text-[40px] tracking-[4px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#00FF41 80%,#333 80%)" aria-label="4 stars">
28	★★★★★
29	</span>
30	<span class="text-xs text-[#808080]">
31	Hero (40px)
32	</span>
33	</div>
34	</div>

1	<div class="d-flex flex-column gap-3 p-4">
2	<div class="d-flex align-items-center gap-4">
3	<span style="font-size:12px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 80%,#333 80%);-webkit-background-clip:text;background-clip:text" aria-label="4 stars">
4	★★★★★
5	</span>
6	<span class="text-secondary" style="font-size:12px">
7	Small (12px)
8	</span>
9	</div>
10	<div class="d-flex align-items-center gap-4">
11	<span style="font-size:18px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 80%,#333 80%);-webkit-background-clip:text;background-clip:text" aria-label="4 stars">
12	★★★★★
13	</span>
14	<span class="text-secondary" style="font-size:12px">
15	Default (18px)
16	</span>
17	</div>
18	<div class="d-flex align-items-center gap-4">
19	<span style="font-size:28px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 80%,#333 80%);-webkit-background-clip:text;background-clip:text" aria-label="4 stars">
20	★★★★★
21	</span>
22	<span class="text-secondary" style="font-size:12px">
23	Large (28px)
24	</span>
25	</div>
26	<div class="d-flex align-items-center gap-4">
27	<span style="font-size:40px;letter-spacing:4px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 80%,#333 80%);-webkit-background-clip:text;background-clip:text" aria-label="4 stars">
28	★★★★★
29	</span>
30	<span class="text-secondary" style="font-size:12px">
31	Hero (40px)
32	</span>
33	</div>
34	</div>

1	.review-demo {
2	padding:20px 24px;
3	font-family:system-ui,
4	sans-serif;
5	background:#0A0A0A
6	}
7	.review-card {
8	max-width:300px
9	}
10	.review-header {
11	display:flex;
12	gap:16px;
13	align-items:flex-start;
14	margin-bottom:16px
15	}
16	.review-score {
17	font-size:40px;
18	font-weight:800;
19	color:#E0E0E0;
20	line-height:1
21	}
22	.review-meta {
23	display:flex;
24	flex-direction:column;
25	gap:4px
26	}
27	.stars {
28	--rating:0;
29	--star-color:#333;
30	--star-fill:#00FF41;
31	font-size:14px;
32	letter-spacing:1px;
33	line-height:1;
34	background:linear-gradient(90deg,
35	var(--star-fill) calc(var(--rating)/5*100%),
36	var(--star-color) calc(var(--rating)/5*100%));
37	-webkit-background-clip:text;
38	-webkit-text-fill-color:transparent;
39	background-clip:text;
40	display:inline-block
41	}
42	.review-count {
43	font-size:11px;
44	color:#808080
45	}
46	.rating-bars {
47	display:flex;
48	flex-direction:column;
49	gap:6px
50	}
51	.bar-row {
52	display:flex;
53	align-items:center;
54	gap:8px
55	}
56	.bar-label {
57	font-size:11px;
58	color:#808080;
59	width:10px;
60	text-align:right;
61	flex-shrink:0
62	}
63	.bar-track {
64	flex:1;
65	height:8px;
66	background:#1A1A1A;
67	border-radius:4px;
68	overflow:hidden
69	}
70	.bar-fill {
71	height:100%;
72	background:#00FF41;
73	border-radius:4px;
74	transition:width .5s ease
75	}
76	.bar-count {
77	font-size:10px;
78	color:#666;
79	min-width:32px;
80	flex-shrink:0;
81	text-align:right
82	}

1	.color-demo {
2	display:flex;
3	flex-direction:column;
4	gap:10px;
5	padding:24px;
6	font-family:system-ui,
7	sans-serif;
8	background:#0A0A0A
9	}
10	.color-row {
11	display:flex;
12	align-items:center;
13	gap:12px
14	}
15	.stars {
16	--rating:0;
17	letter-spacing:2px;
18	line-height:1;
19	background:linear-gradient(90deg,
20	var(--fill) calc(var(--rating)/5*100%),
21	var(--empty) calc(var(--rating)/5*100%));
22	-webkit-background-clip:text;
23	-webkit-text-fill-color:transparent;
24	background-clip:text;
25	display:inline-block;
26	font-size:20px
27	}
28	.stars.success {
29	--fill:#00FF41;
30	--empty:#1A2A1E
31	}
32	.stars.info {
33	--fill:#3B82F6;
34	--empty:#1A1A2E
35	}
36	.stars.warning {
37	--fill:#EAB308;
38	--empty:#2A2510
39	}
40	.stars.danger {
41	--fill:#EF4444;
42	--empty:#2A1515
43	}
44	.stars.neutral {
45	--fill:#A0A0A0;
46	--empty:#333
47	}
48	.color-label {
49	font-size:12px;
50	color:#808080;
51	min-width:70px
52	}

1	<div class="flex flex-col gap-2.5 p-6 bg-[#0A0A0A] font-sans">
2	<div class="flex items-center gap-3">
3	<span class="text-[20px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#00FF41 80%,#1A2A1E 80%)" aria-label="4 stars">
4	★★★★★
5	</span>
6	<span class="text-xs text-[#808080] min-w-[70px]">
7	Success
8	</span>
9	</div>
10	<div class="flex items-center gap-3">
11	<span class="text-[20px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#3B82F6 80%,#1A1A2E 80%)" aria-label="4 stars">
12	★★★★★
13	</span>
14	<span class="text-xs text-[#808080] min-w-[70px]">
15	Info
16	</span>
17	</div>
18	<div class="flex items-center gap-3">
19	<span class="text-[20px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#EAB308 80%,#2A2510 80%)" aria-label="4 stars">
20	★★★★★
21	</span>
22	<span class="text-xs text-[#808080] min-w-[70px]">
23	Warning
24	</span>
25	</div>
26	<div class="flex items-center gap-3">
27	<span class="text-[20px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#EF4444 80%,#2A1515 80%)" aria-label="4 stars">
28	★★★★★
29	</span>
30	<span class="text-xs text-[#808080] min-w-[70px]">
31	Danger
32	</span>
33	</div>
34	<div class="flex items-center gap-3">
35	<span class="text-[20px] tracking-[2px] leading-none inline-block text-transparent bg-clip-text" style="background-image:linear-gradient(90deg,#A0A0A0 80%,#333 80%)" aria-label="4 stars">
36	★★★★★
37	</span>
38	<span class="text-xs text-[#808080] min-w-[70px]">
39	Neutral
40	</span>
41	</div>
42	</div>

1	.chip-demo {
2	display:flex;
3	flex-wrap:wrap;
4	gap:12px;
5	align-items:center;
6	justify-content:center;
7	padding:32px;
8	font-family:system-ui,
9	sans-serif;
10	background:#0A0A0A
11	}
12	.rating-chip {
13	display:inline-flex;
14	align-items:center;
15	gap:6px;
16	padding:6px 12px;
17	border-radius:999px;
18	background:#151515;
19	color:#00FF41;
20	font-size:13px;
21	font-weight:600;
22	border:1px solid #2A2A3E
23	}
24	.rating-chip svg {
25	flex-shrink:0
26	}
27	.chip-count {
28	font-size:11px;
29	color:#808080;
30	font-weight:400
31	}
32	.rating-chip.outline {
33	background:transparent;
34	color:#00FF41;
35	border-color:#00FF41
36	}
37	.rating-chip.badge {
38	background:#00FF41;
39	color:#0A0A0A;
40	border-color:#00FF41;

1	<div class="flex flex-wrap gap-3 items-center justify-center p-8 bg-[#0A0A0A] font-sans">
2	<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[#151515] text-[#00FF41] text-[13px] font-semibold border border-[#2A2A3E]">
3	<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor">
4	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
5	</svg>
6	<span>
7	4.8
8	</span>
9	<span class="text-[11px] text-[#808080] font-normal">
10	(128)
11	</span>
12	</span>
13	<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-transparent text-[#00FF41] text-[13px] font-semibold border border-[#00FF41]">
14	<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor">
15	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
16	</svg>
17	<span>
18	3.5
19	</span>
20	</span>
21	<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[#00FF41] text-[#0A0A0A] text-[11px] font-semibold border border-[#00FF41] uppercase tracking-[0.3px]">
22	<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor">
23	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
24	</svg>
25	<span>
26	Top Rated
27	</span>
28	</span>
29	</div>

1	<div class="d-flex flex-wrap gap-3 align-items-center justify-content-center p-4">
2	<span class="badge rounded-pill d-inline-flex align-items-center gap-2 fw-semibold" style="padding:6px 12px;background:#151515;color:#00FF41;border:1px solid #2A2A3E;font-size:13px">
3	<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
4	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
5	</svg>
6	<span>
7	4.8
8	</span>
9	<span class="fw-normal text-secondary" style="font-size:11px">
10	(128)
11	</span>
12	</span>
13	<span class="badge rounded-pill d-inline-flex align-items-center gap-2 fw-semibold" style="padding:6px 12px;background:transparent;color:#00FF41;border:1px solid #00FF41;font-size:13px">
14	<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
15	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
16	</svg>
17	<span>
18	3.5
19	</span>
20	</span>
21	<span class="badge rounded-pill d-inline-flex align-items-center gap-2 fw-semibold text-uppercase" style="padding:6px 12px;background:#00FF41;color:#0A0A0A;border:1px solid #00FF41;font-size:11px;letter-spacing:.3px">
22	<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
23	<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
24	</svg>
25	<span>
26	Top Rated
27	</span>
28	</span>
29	</div>

1	.compare-demo {
2	display:flex;
3	align-items:center;
4	gap:0;
5	padding:24px;
6	font-family:system-ui,
7	sans-serif;
8	background:#0A0A0A;
9	justify-content:center
10	}
11	.compare-col {
12	display:flex;
13	flex-direction:column;
14	align-items:center;
15	gap:8px;
16	padding:0 32px
17	}
18	.compare-label {
19	font-size:10px;
20	color:#555;
21	text-transform:uppercase;
22	letter-spacing:.5px;
23	font-weight:600
24	}
25	.compare-value {
26	font-size:11px;
27	color:#808080
28	}
29	.compare-divider {
30	width:1px;
31	height:60px;
32	background:#222;
33	flex-shrink:0
34	}
35	.stars.readonly {
36	--rating:3.5;
37	--star-size:20px;
38	--star-color:#333;
39	--star-fill:#00FF41;
40	font-size:var(--star-size);
41	letter-spacing:2px;
42	line-height:1;
43	background:linear-gradient(90deg,
44	var(--star-fill) calc(var(--rating)/5*100%),
45	var(--star-color) calc(var(--rating)/5*100%));
46	-webkit-background-clip:text;
47	-webkit-text-fill-color:transparent;
48	background-clip:text;
49	display:inline-block;
50	pointer-events:none
51	}
52	.interactive-stars {
53	display:flex;
54	gap:2px
55	}
56	.i-star {
57	font-size:20px;
58	color:#333;
59	cursor:pointer;
60	transition:color .15s,
61	transform .15s;
62	background:none;
63	border:none;
64	padding:0;
65	line-height:1
66	}
67	.i-star.on {
68	color:#00FF41
69	}
70	.i-star.hoverable:hover {
71	color:#00FF41;
72	transform:scale(1.15)
73	}

1	<div class="d-flex align-items-center justify-content-center gap-0 p-4">
2	<div class="d-flex flex-column align-items-center gap-2 px-4">
3	<span class="fw-semibold text-uppercase" style="font-size:10px;color:#555;letter-spacing:.5px">
4	Read-Only
5	</span>
6	<span style="font-size:20px;letter-spacing:2px;line-height:1;display:inline-block;color:transparent;background:linear-gradient(90deg,#00FF41 70%,#333 70%);-webkit-background-clip:text;background-clip:text;pointer-events:none" aria-label="3.5 stars">
7	★★★★★
8	</span>
9	<span class="text-secondary" style="font-size:11px">
10	3.5 — Good
11	</span>
12	</div>
13	<div style="width:1px;height:60px;background:#222">
14	</div>
15	<div class="d-flex flex-column align-items-center gap-2 px-4">
16	<span class="fw-semibold text-uppercase" style="font-size:10px;color:#555;letter-spacing:.5px">
17	Interactive
18	</span>
19	<span class="d-flex gap-1" id="bs-compare" aria-label="Click to rate">
20	<button class="btn btn-link p-0" style="font-size:20px;color:#00FF41;line-height:1" data-value="1" aria-label="1 star">
21	★
22	</button>
23	<button class="btn btn-link p-0" style="font-size:20px;color:#00FF41;line-height:1" data-value="2" aria-label="2 stars">
24	★
25	</button>
26	<button class="btn btn-link p-0" style="font-size:20px;color:#00FF41;line-height:1" data-value="3" aria-label="3 stars">
27	★
28	</button>
29	<button class="btn btn-link p-0" style="font-size:20px;color:#333;line-height:1" data-value="4" aria-label="4 stars">
30	★
31	</button>
32	<button class="btn btn-link p-0" style="font-size:20px;color:#333;line-height:1" data-value="5" aria-label="5 stars">
33	★
34	</button>
35	</span>
36	<span class="text-secondary" style="font-size:11px" id="bs-compare-output">
37	Click to rate
38	</span>
39	</div>
40	</div>