Review Card with Star Rating
Display customer feedback and product ratings with this clean and accessible user review card.
This is an indispensable component for any e-commerce site, booking platform, or listing service to build social proof and help users make informed decisions.
About this Component
This card is structured to present all the essential elements of a user review. In particular it includes a star rating, a title, the review text, and author information. The CSS-driven star rating system is both easy to implement and accessible.
Features
- Accessible Star Rating: While the stars are visible icons, the actual rating is provided in a visually-hidden text element, making it perfectly clear for screen reader users.
- SVG Icons: The stars are lightweight, inline SVGs that scale perfectly and can be colored with CSS.
- Semantic Structure: The card uses an
articletag withheaderandfooterelements to create a clear and semantic document outline. - Flexible Layout: Built with Flexbox to ensure the author's information is always neatly positioned at the bottom of the card, regardless of the review's length.
Code Breakdown
HTML Structure
The star rating (.review-card-stars) contains two important parts for accessibility. First, a span with a .visually-hidden class explicitly states the rating (e.g., "Rating: 4 out of 5 stars"). Second, the visual star svg elements are marked with aria-hidden="true" so that screen readers ignore them and read the text description instead. To show a specific rating, you apply the .star-filled class to the appropriate number of stars.
CSS Styling
The stars are colored using a simple CSS class system. The default color of the star container is a light gray for "empty" stars. The .star-filled class then overrides this with a prominent gold color. A helper class, .visually-hidden, is used to hide the accessibility text from sighted users by moving it off-screen without removing it from the document flow. The card's vertical structure is managed with display: flex and flex-grow: 1 on the main body, ensuring the footer aligns nicely.
Code
Here's the complete, self-contained code. To set a rating, simply add the .star-filled class to the desired number of stars, and update the text in the visually-hidden span accordingly.