Star Rating

Star Rating displays a row of stars filled to a precise rating value, with an optional numeric value and review count below. Use it in testimonials, product cards, case study headers, or anywhere you want to show social proof at a glance.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Star Rating. The block drops in at 4.5 out of 5 stars.

Rating

Precision controls how finely the rating value is snapped:

Rating — the value to display. The slider runs from 0 to the current Max Stars, and its step follows Precision: 1 for Full, 0.5 for Half, 0.1 for Any.

Max Stars — the total number of stars in the row. Range 3–10, default 5.

Labels

Show numeric value displays the rating number alongside the stars (e.g. 4.5). Full-star precision shows no decimal; Half and Any show one decimal place.

Show review count displays the count in parentheses after the value (e.g. (1,234 reviews)) and reveals two more fields:

• Review count — the number to display, formatted with locale-aware thousands separators on the frontend
• Count label — the word after the number. Default reviews; change it to ratings, opinions, or anything else.

Layout

Alignment positions the star row and meta line: Left (default), Center, or Right. It's a per-device control, so a centered rating on a desktop card can align left on mobile.

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the rating says; Styles is how it looks, organised by the parts you can see.

Styling

• Filled is the color of the filled portion. Default #fbbf24 (amber).
• Empty is the unfilled remainder. Default #e5e7eb (light grey).
• Size is the width and height of each star, 10–80 px and per-device.
• Text and Typography style the value and count line. Default text color #4b5563.

The block supports Wide and Full alignment from the toolbar and an HTML anchor.

HTML output

<div class="axiom-blocks-star-rating axiom-blocks-star-rating--align-left">
  <div
    class="axiom-blocks-star-rating__stars"
    role="img"
    aria-label="Rating: 4.5 out of 5"
  >
    <!-- Empty star row — always full width, sits behind the filled row -->
    <div class="axiom-blocks-star-rating__row axiom-blocks-star-rating__row--empty">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="#e5e7eb" aria-hidden="true">...</svg>
      <!-- × maxStars -->
    </div>
    <!-- Filled star row — clipped to fill percentage -->
    <div class="axiom-blocks-star-rating__row axiom-blocks-star-rating__row--filled" style="width: 90%;">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="#fbbf24" aria-hidden="true">...</svg>
      <!-- × maxStars -->
    </div>
  </div>

  <!-- Only rendered when showValue or showCount is enabled -->
  <div class="axiom-blocks-star-rating__meta" style="color: #4b5563;">
    <span class="axiom-blocks-star-rating__value">4.5</span>
    <span class="axiom-blocks-star-rating__count">(1,234 reviews)</span>
  </div>
</div>

The star fill works by overlaying two identical rows — one in the empty color, one in the filled color — and clipping the filled row to width: {fillPercent}%. A 4.5 out of 5 rating clips to 90%, which is what lets Any fraction precision render an exact 4.3 without a special half-star glyph.

Per-device alignment and star size are emitted as scoped media-query rules — justify-content on the wrapper, width and height on the star SVGs — so the inline values above are always the desktop ones.