Rating FigmaFigma Code Connected

Ratings are used to signify a value or status for a particular activity type.

Default rating

Create a default rating by adding the class .hc-rating to a <span> or any inline element. This will have primary text with a primary circle indicator, at the default 0.75rem round size.

Default rating

HTML

Expand Edit in Playground Copy


<span class="hc-rating">Default rating</span>

Size and color modifiers

Extend a rating with indicator size and color modifiers based on the activity type and the rating level.

To add a type modifier, use classes in the format .hc-rating--{type}, like .hc-rating--goal or .hc-rating--form. Available types include: goal, form, summative, next-step, event, and cycle.

Rating levels use a fractional approach for the class names where the numerator is the rating level and the denominator is the number of levels within that rating’s scale. For instance, for a 2 rating on a scale with 4 levels, append .hc-rating--2/4.

Ineffective Developing Effective Highly Effective

HTML

Expand Edit in Playground Copy


<span class="hc-rating hc-rating--form hc-rating--1/4">Ineffective</span>
<span class="hc-rating hc-rating--form hc-rating--2/4">Developing</span>
<span class="hc-rating hc-rating--form hc-rating--3/4">Effective</span>
<span class="hc-rating hc-rating--form hc-rating--4/4">Highly Effective</span>

Only the width and color of the rating indicator changes based on activity type and rating value. If you’d like to change the color of the label itself, simply add a text utility class like .hc-text-activity-form-500.

All available arrangements

Rating scales are supported for up to 7 levels for the above activity types.

2 levels: Scheduled Complete

3 levels: Draft Active Complete

4 levels: Closed Open Finalizing Complete

5 levels: Ineffective Developing Effective Highly Effective Mastery

6 levels: Closed Draft Next Up Active Overdue Complete

7 levels: Kickoff Meeting Identify Explain Modeling Observe Feedback Improve

HTML

Expand Edit in Playground Copy


<div class="flex flex-col items-start gap-1">
  <span class="hc-micro hc-label">2 levels:</span>
  <span class="hc-rating hc-rating--event hc-rating--1/2">Scheduled</span>
  <span class="hc-rating hc-rating--event hc-rating--2/2">Complete</span>
</div>
<div class="flex flex-col items-start gap-1">
  <span class="hc-micro hc-label">3 levels:</span>
  <span class="hc-rating hc-rating--goal hc-rating--1/3">Draft</span>
  <span class="hc-rating hc-rating--goal hc-rating--2/3">Active</span>
  <span class="hc-rating hc-rating--goal hc-rating--3/3">Complete</span>
</div>
<div class="flex flex-col items-start gap-1">
  <span class="hc-micro hc-label">4 levels:</span>
  <span class="hc-rating hc-rating--summative hc-rating--1/4">Closed</span>
  <span class="hc-rating hc-rating--summative hc-rating--2/4">Open</span>
  <span class="hc-rating hc-rating--summative hc-rating--3/4">Finalizing</span>
  <span class="hc-rating hc-rating--summative hc-rating--4/4">Complete</span>
</div>
<div class="flex flex-col items-start gap-1">
  <span class="hc-micro hc-label">5 levels:</span>
  <span class="hc-rating hc-rating--form hc-rating--1/5">Ineffective</span>
  <span class="hc-rating hc-rating--form hc-rating--2/5">Developing</span>
  <span class="hc-rating hc-rating--form hc-rating--3/5">Effective</span>
  <span class="hc-rating hc-rating--form hc-rating--4/5">Highly Effective</span>
  <span class="hc-rating hc-rating--form hc-rating--5/5">Mastery</span>
</div>
<div class="flex flex-col items-start gap-1">
  <span class="hc-micro hc-label">6 levels:</span>
  <span class="hc-rating hc-rating--next-step hc-rating--1/6">Closed</span>
  <span class="hc-rating hc-rating--next-step hc-rating--2/6">Draft</span>
  <span class="hc-rating hc-rating--next-step hc-rating--3/6">Next Up</span>
  <span class="hc-rating hc-rating--next-step hc-rating--4/6">Active</span>
  <span class="hc-rating hc-rating--next-step hc-rating--5/6">Overdue</span>
  <span class="hc-rating hc-rating--next-step hc-rating--6/6">Complete</span>
</div>
<div class="flex flex-col items-start gap-1">
  <span class="hc-micro hc-label">7 levels:</span>
  <span class="hc-rating hc-rating--cycle hc-rating--1/7">Kickoff Meeting</span>
  <span class="hc-rating hc-rating--cycle hc-rating--2/7">Identify</span>
  <span class="hc-rating hc-rating--cycle hc-rating--3/7">Explain</span>
  <span class="hc-rating hc-rating--cycle hc-rating--4/7">Modeling</span>
  <span class="hc-rating hc-rating--cycle hc-rating--5/7">Observe</span>
  <span class="hc-rating hc-rating--cycle hc-rating--6/7">Feedback</span>
  <span class="hc-rating hc-rating--cycle hc-rating--7/7">Improve</span>
</div>

Justified labels

To align the rating labels together for each rating subset, apply the class .hc-rating--justify to the rating itself. The spacing is based on the denominator, or number of levels you’re using. This is useful when ratings are in a table column and you want them to be visually aligned better.

Ineffective Developing Effective Highly Effective

HTML

Expand Edit in Playground Copy


<div class="flex flex-col items-start gap-1">
  <span class="hc-rating hc-rating--form hc-rating--justify hc-rating--1/4">Ineffective</span>
  <span class="hc-rating hc-rating--form hc-rating--justify hc-rating--2/4">Developing</span>
  <span class="hc-rating hc-rating--form hc-rating--justify hc-rating--3/4">Effective</span>
  <span class="hc-rating hc-rating--form hc-rating--justify hc-rating--4/4">Highly Effective</span>
</div>