Components

• Button
• Cookie banner
• Filter
• Graph
• Highlight
• Notification
• Pagination
• Panel
• Rating
• Search form
• Search results
• Table
• Tabs
• Tag
• Time line

Rating

Display a star rating for an item or organisation.

Example

Open this example in a new tab

HTML

<p class="govuk-body">
  <span class="das-rating das-rating--good" role="img" aria-label="Rating: 3 out of 4 stars">
    <span aria-hidden="true" class="das-rating__icon-star"></span>
    <span aria-hidden="true" class="das-rating__icon-star"></span>
    <span aria-hidden="true" class="das-rating__icon-star"></span>
    <span aria-hidden="true" class="das-rating__icon-star--empty"></span>
  </span>
</p>

Options

Example showing the stars when wrapped in a larger font, and the option to change colour when ratings are poor.

Open this example in a new tab

HTML

<div class="govuk-!-font-size-48">
  <span class="das-rating das-rating--poor" role="img" aria-label="Rating: 1 out of 4 stars">
    <span aria-hidden="true" class="das-rating__icon-star"></span>
    <span aria-hidden="true" class="das-rating__icon-star--empty"></span>
    <span aria-hidden="true" class="das-rating__icon-star--empty"></span>
    <span aria-hidden="true" class="das-rating__icon-star--empty"></span>
  </span>
</div>