Fancy Reviews

Parent / child element

Fancy Reviews

Review cards with a star rating, quote, author, role, source and avatar, in eight designs. Show them as a grid, a swipeable slider, a single spotlight, or speech bubbles and quote blobs.

Eight designs, including Grid, Slider, Spotlight, Editorial Quote and Speech Bubble
Star ratings from 0 to 5, with half stars
Author, role, source and avatar on every review
Initials avatar when no photo is set
Slider with dot navigation, arrows and touch drag
Lift, glow or scale hover effects

Designs

8 designs

Columns

1 to 4 per row

Rating

0 to 5, half stars

Grid

The new site launched on time and our enquiries doubled in the first month. The team explained every decision in plain English.

Our online orders are up 38% since the redesign. Checkout is faster, and customers keep telling us how easy it is to use.

Clear pricing, quick replies and a design system our own team can now extend without breaking anything.

Slider

They moved forty pages from our old site without losing a single ranking. We barely noticed the switch.
James Carter
Operations Manager, Carter LogisticsGoogle
Class bookings went from phone calls to a simple online timetable. I get hours of my week back.
Aisha Rahman
Owner, Bloom Yoga StudioFacebook
Fast, accessible and easy to edit. Our Lighthouse scores went from the sixties to the high nineties.
Lucas Moreau
CTO, ParcellyCapterra
The new site launched on time and our enquiries doubled in the first month. The team explained every decision in plain English.
Sarah Mitchell
Marketing Director, Northwind StudioGoogle
Our online orders are up 38% since the redesign. Checkout is faster, and customers keep telling us how easy it is to use.
David Okafor
Founder, Okafor Coffee Co.Trustpilot
Clear pricing, quick replies and a design system our own team can now extend without breaking anything.
Emma Larsson
Head of Product, Fjord LabsG2

Spotlight

Clear pricing, quick replies and a design system our own team can now extend without breaking anything.

They moved forty pages from our old site without losing a single ranking. We barely noticed the switch.

Class bookings went from phone calls to a simple online timetable. I get hours of my week back.

Editorial Quote

Class bookings went from phone calls to a simple online timetable. I get hours of my week back.

Fast, accessible and easy to edit. Our Lighthouse scores went from the sixties to the high nineties.

Compact Row

David Okafor

Founder, Okafor Coffee Co.

Our online orders are up 38% since the redesign. Checkout is faster, and customers keep telling us how easy it is to use.

James Carter

Operations Manager, Carter Logistics

They moved forty pages from our old site without losing a single ranking. We barely noticed the switch.

Lucas Moreau

CTO, Parcelly

Fast, accessible and easy to edit. Our Lighthouse scores went from the sixties to the high nineties.

Avatar Badge

Sarah Mitchell

Marketing Director, NorthwindGoogle

The new site launched on time and our enquiries doubled in the first month.

Emma Larsson

Head of Product, Fjord LabsG2

Clear pricing, quick replies and a design system our own team can now extend without breaking anything.

Aisha Rahman

Owner, Bloom Yoga StudioFacebook

Class bookings went from phone calls to a simple online timetable. I get hours of my week back.

Speech Bubble

David Okafor

Our online orders are up 38% since the redesign. Checkout is faster, and customers keep telling us how easy it is to use.

James Carter

They moved forty pages from our old site without losing a single ranking. We barely noticed the switch.

Lucas Moreau

Fast, accessible and easy to edit. Our Lighthouse scores went from the sixties to the high nineties.

Quote Blobs

Class bookings went from phone calls to a simple online timetable. I get hours of my week back.

Aisha Rahman

Owner, Bloom Yoga Studio

Clear pricing, quick replies and a design system our own team can now extend without breaking anything.

Emma Larsson

Head of Product, Fjord Labs

All eight designs share the same review and colour settings. Switch between them with the Design option.

Example of fancy reviews with initials avatars, a lift hover effect and four columns…

Our online orders are up 38% since the redesign. Checkout is faster, and customers keep telling us how easy it is to use.

Clear pricing, quick replies and a design system our own team can now extend without breaking anything.

They moved forty pages from our old site without losing a single ranking. We barely noticed the switch.

Example of fancy reviews with an icon quote shape and larger review text…

Fast, accessible and easy to edit. Our Lighthouse scores went from the sixties to the high nineties.

The new site launched on time and our enquiries doubled in the first month. The team explained every decision in plain English.

Example of fancy reviews slider with dark arrows and larger stars…

Class bookings went from phone calls to a simple online timetable. I get hours of my week back.
Aisha Rahman
Owner, Bloom Yoga StudioFacebook
Clear pricing, quick replies and a design system our own team can now extend without breaking anything.
Emma Larsson
Head of Product, Fjord LabsG2
Our online orders are up 38% since the redesign. Checkout is faster, and customers keep telling us how easy it is to use.
David Okafor
Founder, Okafor Coffee Co.Trustpilot
They moved forty pages from our old site without losing a single ranking. We barely noticed the switch.
James Carter
Operations Manager, Carter LogisticsGoogle

Use cases

Customer reviews on a landing page, pulled together from Google, Trustpilot and G2.

A swipeable slider of client quotes on a services or agency home page.

A single spotlight review beside a pricing table or sign-up form to build trust.

Key features

What the element does, in plain terms. Every individual control is listed in the settings reference below.

Layout

Eight designs

Grid, Slider, Spotlight, Editorial Quote, Compact Row, Avatar Badge, Speech Bubble and Quote Blobs, all built from the same review settings.

Columns and spacing

Show one to four reviews per row with a custom column gap. Slider and Spotlight set their own layout.

Reviews

Ratings with half stars

Each review has a star rating from 0 to 5 in half-star steps, with its own star size and colour.

Author details

Show the author name, role or company and the review source, such as Google or Trustpilot.

Avatars

Upload a reviewer photo, or leave it empty to show a coloured circle with their initials.

Behaviour

Slider navigation

The Slider design adds dot navigation and previous and next arrows, and supports touch and mouse drag.

Hover effects

Cards can lift, glow or scale when a visitor hovers over them.

Styling

Design-specific controls

Each design has its own extras, such as the editorial quote shape, the badge avatar ring, the bubble tail size and the slider arrow colours.

Typography and colour

Separate font settings for the review text, author and meta lines, plus card, border, star, accent, avatar and text colours.

Settings reference

Every setting the element exposes, grouped by builder tab. Options are listed where the setting offers a fixed set of choices.

Structure General tab

Design

Grid · Slider · Spotlight · Editorial Quote · Compact Row · Avatar Badge · Speech Bubble · Quote Blobs

How the reviews are laid out. Default Grid.

Reviews

Child elements

Add, reorder, clone or remove reviews. Each review has its own settings, listed below.

Columns

1 · 2 · 3 · 4

The number of columns. Default 3. Not used by Slider or Spotlight.

Author Name Tag

H1 · H2 · H3 · H4 · H5 · H6

The HTML tag used for the author name. Default H4.

Element Visibility

Small · Medium · Large screen

Shows or hides the element on small, medium or large screens.

CSS Class

Adds a class to the wrapping HTML element.

CSS ID

Adds an ID to the wrapping HTML element.

Typography General tab

Review Text Typography

Font family, weight, size, line height, letter spacing

Font settings for the review quote.

Author Typography

Font family, weight, size, line height, letter spacing

Font settings for the author name.

Meta Typography

Font family, weight, size, line height, letter spacing

Font settings for the role and source lines.

Layout Extras tab

Hover Effect

None · Lift · Glow · Scale

The animation when a visitor hovers over a card. Default None. Not used by Spotlight.

Column Gap

Number. Default 24

The space between cards, in pixels.

Avatar Size

Number. Default 48

The diameter of the reviewer avatar or initials circle, in pixels.

Star Size

Number. Default 15

The font size of the rating stars, in pixels.

Review Child element, one per review

Review Text

Rich text

The body of the review.

Rating

0 to 5, half stars allowed

The star rating. Default 5.

Author

Text

The name of the reviewer.

Role

Text

The role or company shown below the author.

Source

Text

Where the review came from, for example Google or Trustpilot.

Avatar

Image upload

An optional reviewer photo. Without one, the reviewer’s initials are shown in a circle.

Cards Design tab

Padding

Top · Right · Bottom · Left. Default 32

The padding inside each card, in pixels.

Background

Colour. Default #f7f7fb

The background colour of each review card.

Border Width

Top · Right · Bottom · Left

The card border width on each side, in pixels.

Border Color

Colour. Default #e6e6e6

The colour of the card border.

Border Radius

Number. Default 20

The card corner rounding. Set 0 for sharp corners.

Design extras Design tab

Background Shape

Quote Mark · Circle · Rounded Square · Icon · None

Editorial Quote only. The decorative shape behind the quote, in the top-right corner. Default Quote Mark.

Quote Icon

Icon picker

Editorial Quote with the Icon shape. The icon shown in place of the quote mark.

Icon Size

Number. Default 28

Editorial Quote with the Icon shape. The font size of the quote icon.

Quote Accent Color

Colour. Default #dcd8f7

Editorial Quote only. The colour of the decorative shape or icon.

Accent Width

Number. Default 4

Compact Row only. The width of the coloured accent bar on the left edge of each row.

Badge Avatar Size

Number. Default 120

Avatar Badge only. The diameter of the large avatar that overlaps the top of the card.

Quote Mark Color

Colour. Default #65bc7b

Avatar Badge only. The colour of the quote mark in the top-left corner.

Quote Mark Size

Number. Default 36

Avatar Badge only. The font size of the quote mark.

Avatar Border Color

Colour. Default #65bc7b

Avatar Badge only. The ring around the overlapping avatar.

Footer Top Radius

Number. Default 64

Avatar Badge only. The rounding of the footer strip’s top corners.

Footer Overlap

Number. Default 20

Avatar Badge only. How far the footer strip tucks under the card. Set 0 for a flush footer.

Quote Marks Color

Colour. Default #c9ccd1

Speech Bubble only. The colour of the quote marks beside the avatar.

Quote Marks Size

Number. Default 32

Speech Bubble only. The font size of the quote marks.

Tail Size

Number. Default 20

Speech Bubble only. The size of the speech-bubble tail under the card.

Arrow Background

Colour

Slider only. The background of the previous and next arrows. Leave empty to use the accent colour.

Arrow Icon Color

Colour. Default #ffffff

Slider only. The colour of the arrow icons.

Colours Design tab

Star Color

Colour. Default #f5a623

The colour of the rating stars.

Accent Color

Colour. Default #65bc7b

The slider dots, the default slider arrow background and the Compact Row accent bar.

Avatar Background

Colour. Default #6c63ff

The background of the initials avatar shown when no photo is set.

Author Color

Colour. Default #1a1a1a

The colour of the author name.

Review Text Color

Colour. Default #4a4a4a

The colour of the review text.

Meta Color

Colour. Default #8a8a8a

The colour of the role and source lines.

Fancy Pricing Plans

Fancy Comparison Table

On this page

Use cases
Key features
Settings reference

Showing one longer quote instead of a set of reviews? Fancy Testimonial has carousel and single-quote layouts.