Badge Alpha

overview

A rating badge that uses data attributes for manual or dynamic rating input.

Badge Alpha
Available for:
Figma
Bricks
Gutenberg
Buy Frames
Back to library

Overview

Query Loop Compatible

Variables

This frame doesn't use any locally scoped variables.

Other frames within this frame may contain variables. You can see all related frames further down the page.

HTML5 Tags & Attributes

Other frames within this frame may contain specific HTML5 tags. You can see all related frames further down the page.

Accessibility Notes

No additional accessibility notes for this frame.

FAQs

How do I change the star rating?

The star rating is controlled via a data attribute called data-badge-value. This makes the badge query loop compatible, as the data attribute allows you to set the star rating dynamically.

To change the star rating manually, click on .fr-badge-alpha__icon and then navigate to style > attributes. Open the data-badge-value attribute and change the value to the new rating.

To change the star rating dynamically, use a custom field or some other database value for your rating. Then, you can pass the value of that field into the data attribute value input using dynamic data.

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.