Course Stats & Reviews Hero Template
Build trust and social proof for your course with a hero section that leads with impressive numbers.
This layout is designed to immediately showcase a course's popularity and quality by displaying key metrics like the number of students enrolled and the average rating.
About the Stats & Reviews Hero
Course popularity and reputation are two major factors students consider before signing up. This hero section addresses that immediately. By presenting concrete data like enrollment numbers and high ratings, you leverage social proof to build instant credibility, making students more likely to trust the course content and enroll.
Features
- Social Proof by the Numbers: The design highlights important metrics that signal quality and popularity.
- Visual Star Rating: Includes a CSS-based star rating display for a quick visual cue of quality.
- Clean & Focused Layout: A professional, uncluttered design that keeps the focus on the course title and its impressive stats.
- Fully Responsive: Looks great on all screen sizes, with stat blocks wrapping as needed on smaller devices.
Code Breakdown
The component is delivered as a CSS block for your website's head and an HTML block for the body.
The layout of the hero content is controlled by Flexbox. A stats-bar div is also a flex container, allowing the stats to be displayed in a row and to wrap onto the next line on mobile devices. Each stat item aligns its icon, text, and rating using flexbox as well.
The star rating is created with the use of inline svg icons and a CSS custom property. We can control the rating by setting the --srh-rating variable, which defines the width of a stars-inner div that contains the "filled" star icons. This filled layer sits directly on top of a stars-outer div containing the empty star icons, and the percentage-based width creates the partial star effect for ratings like 4.5.