Review
Description
The Review component is a versatile and visually appealing element designed to showcase user testimonials or product reviews. It features a gradient background with a rounded border, displaying the reviewer's avatar, name, title, comment, and rating. This component is ideal for adding social proof to your website or application.
Installation
bash
sabaccui add review
Usage
Here's an example of how to use the Review component in a Storyblok block:
Preview
John Doe
Senior Developer
This product has revolutionized our workflow. It's intuitive, powerful, and a joy to use. Highly recommended for any development team looking to boost their productivity.
4.5 out of 5 stars
Schema
| Field | Type | Description | Default |
|---|---|---|---|
avatar | asset | The reviewer's profile picture. | null |
name | text | The name of the reviewer. Translatable. | "" |
title | text | The title or position of the reviewer. Translatable. | "" |
comment | markdown | The review text or testimonial. Optional and translatable. | null |
rating | number | The rating given by the reviewer. Max value is 5, with 1 decimal place allowed. | null |
Notes
- The component uses a gradient background from gray-800 to gray-950 for visual appeal.
- The avatar image is displayed at 64x64 pixels.
- The comment field uses a Markdown component for formatting.
- A Rating component is used to display the rating value.
Best Practices:
- Always provide high-quality, appropriately sized avatar images for the best visual presentation.
- Keep the comment concise and impactful for better readability.
- Use the rating field consistently across all reviews for fair comparison.
- Ensure that the name and title are accurate and up-to-date.
- Translate the content when targeting multiple languages to improve user experience.