Review List

Stack of review cards with provider logo, star rating, review text, optional insurer response, and show more/less toggle.

#ffffff #f8f3f0 #1f1f5a #1f2937 #111827 #111827 #6b7280 #d1413d #9ca3af #f9fafb #1f2937
  • true

    Overall Rating

    Verified Review

    Best service

    1 Comment(s)

    24 February 2026, 1:13 PM

    ****

    Show More Show Less

    I just wanted to say thanks to 1Cover for making a very stressful situation much easier. It's scary to need medical treatment and surgery overseas, but they were there at any time when we needed, day or night.

    Thanks for your review Kate. We’re so pleased we were able to help you in Japan and hope you are recovering well now.

    Brand Rep · 11/03/2026

    I just wanted to say thanks to 1Cover for making a very stressful situation much easier. It's scary to need medical treatment and surgery overseas, but they were there at...

  • false

    Overall Rating

    Verified Review

    First time cover

    1 April 2025, 12:12 PM

    Katrin McBeth

    Show More Show Less

    First overseas travel in a few years and had to claim flights to a different city as ours were cancelled. From first phone call to email updates everything went smoothly.

    First overseas travel in a few years and had to claim flights to a different city as ours were cancelled. From first phone call to email updates everything went smoothly.

---
import ReviewList from "@page-sections/people/review-list/ReviewList.astro";
---

<ReviewList
accentColor="#d1413d" bodyColor="#1f2937" cardBackgroundColor="#ffffff" colorScheme="light" metaColor="#111827" mutedStarColor="#9ca3af" paddingVertical="xl" ratingLabelColor="#111827" responseBackgroundColor="#f9fafb" responseTextColor="#1f2937" reviews={
  [
    {
      "providerLogoSource": "/src/assets/images/component-docs/website-hero.svg",
      "providerLogoAlt": "1Cover Travel Insurance logo",
      "title": "Best service",
      "commentCountLabel": "1 Comment(s)",
      "dateLabel": "24 February 2026, 1:13 PM",
      "authorName": "****",
      "body": "I just wanted to say thanks to 1Cover for making a very stressful situation much easier. It's scary to need medical treatment and surgery overseas, but they were there at any time when we needed, day or night.",
      "responseBody": "Thanks for your review Kate. We’re so pleased we were able to help you in Japan and hope you are recovering well now.",
      "responseMeta": "Brand Rep · 11/03/2026",
      "overallRatingLabel": "Overall Rating",
      "verifiedLabel": "Verified Review",
      "showMoreText": "Show More",
      "showLessText": "Show Less",
      "filledStars": 5,
      "totalStars": 5,
      "expandedByDefault": true
    },
    {
      "providerLogoSource": "/src/assets/images/component-docs/website-hero.svg",
      "providerLogoAlt": "1Cover Travel Insurance logo",
      "title": "First time cover",
      "commentCountLabel": "",
      "dateLabel": "1 April 2025, 12:12 PM",
      "authorName": "Katrin McBeth",
      "body": "First overseas travel in a few years and had to claim flights to a different city as ours were cancelled. From first phone call to email updates everything went smoothly.",
      "responseBody": "",
      "responseMeta": "",
      "overallRatingLabel": "Overall Rating",
      "verifiedLabel": "Verified Review",
      "showMoreText": "Show More",
      "showLessText": "Show Less",
      "filledStars": 5,
      "totalStars": 5,
      "expandedByDefault": false
    }
  ]
} sectionBackgroundColor="#f8f3f0" titleColor="#1f1f5a" verifiedLabelColor="#6b7280"
/>
---
blocks:
  _component: page-sections/people/review-list
  cardBackgroundColor: '#ffffff'
  sectionBackgroundColor: '#f8f3f0'
  titleColor: '#1f1f5a'
  bodyColor: '#1f2937'
  metaColor: '#111827'
  ratingLabelColor: '#111827'
  verifiedLabelColor: '#6b7280'
  accentColor: '#d1413d'
  mutedStarColor: '#9ca3af'
  responseBackgroundColor: '#f9fafb'
  responseTextColor: '#1f2937'
  reviews:
    - providerLogoSource: /src/assets/images/component-docs/website-hero.svg
      providerLogoAlt: 1Cover Travel Insurance logo
      title: Best service
      commentCountLabel: 1 Comment(s)
      dateLabel: 24 February 2026, 1:13 PM
      authorName: '****'
      body: I just wanted to say thanks to 1Cover for making a very stressful situation much easier. It's scary to need medical treatment and surgery overseas, but they were there at any time when we needed, day or night.
      responseBody: Thanks for your review Kate. We’re so pleased we were able to help you in Japan and hope you are recovering well now.
      responseMeta: Brand Rep · 11/03/2026
      overallRatingLabel: Overall Rating
      verifiedLabel: Verified Review
      showMoreText: Show More
      showLessText: Show Less
      filledStars: 5
      totalStars: 5
      expandedByDefault: true
    - providerLogoSource: /src/assets/images/component-docs/website-hero.svg
      providerLogoAlt: 1Cover Travel Insurance logo
      title: First time cover
      commentCountLabel: ''
      dateLabel: 1 April 2025, 12:12 PM
      authorName: Katrin McBeth
      body: First overseas travel in a few years and had to claim flights to a different city as ours were cancelled. From first phone call to email updates everything went smoothly.
      responseBody: ''
      responseMeta: ''
      overallRatingLabel: Overall Rating
      verifiedLabel: Verified Review
      showMoreText: Show More
      showLessText: Show Less
      filledStars: 5
      totalStars: 5
      expandedByDefault: false
  colorScheme: light
  paddingVertical: xl
---

Overview

Use this component when you need Trustpilot-style review rows. Each row is CloudCannon-editable and supports provider logo, stars, title, date, author, body, optional response block, and show more/less labels with default expanded state.

Properties

cardBackgroundColor string | default: #ffffff

Background color of each review card.

sectionBackgroundColor string | default: #f8f3f0

Background color behind the list.

titleColor string | default: #1f1f5a

Color for review titles.

bodyColor string | default: #1f2937

Color for review body text.

metaColor string | default: #111827

Color for date, author, and comments label.

ratingLabelColor string | default: #111827

Color for “Overall Rating” text.

verifiedLabelColor string | default: #6b7280

Color for “Verified Review” text.

accentColor string | default: #d1413d

Accent color for stars and show more/less labels.

mutedStarColor string | default: #9ca3af

Muted star color for unfilled stars.

responseBackgroundColor string | default: #f9fafb

Background for the insurer response panel.

responseTextColor string | default: #1f2937

Text color inside the insurer response panel.

reviews array | default: array

List of review cards shown in this section.

Item Properties:

providerLogoSource string | default: /src/assets/images/component-docs/website-hero.svg

Provider logo shown on the left.

providerLogoAlt string | default: Provider logo

Alt text for provider logo.

title string | default: Review title

Review title heading.

commentCountLabel string

Optional right-side comments label.

dateLabel string | default: 1 April 2025, 12:12 PM

Date and time line.

authorName string | default: Reviewer Name

Reviewer name line.

body string | default: Reviewer comment text goes here.

Full review body text.

responseBody string

Optional insurer response shown when expanded.

responseMeta string

Optional meta line under response (e.g. Brand Rep · date).

overallRatingLabel string | default: Overall Rating

Label under stars.

verifiedLabel string | default: Verified Review

Verified badge text.

showMoreText string | default: Show More

Toggle label when card is collapsed.

showLessText string | default: Show Less

Toggle label when card is expanded.

filledStars number | default: 5

Number of highlighted stars.

totalStars number | default: 5

Total stars to show.

expandedByDefault boolean | default: false

Start this card expanded on page load.

colorScheme enum | default: light

Theme context for nested tokens.

Accepted values:
  • inherit
  • light
  • dark

paddingVertical enum | default: xl

Vertical padding for this section.

Accepted values:
  • none
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl

Examples

Variants

#ffffff #f8f3f0 #1f1f5a #1f2937 #111827 #111827 #6b7280 #d1413d #9ca3af #f9fafb #1f2937
  • true

    Overall Rating

    Verified Review

    Best service

    1 Comment(s)

    24 February 2026, 1:13 PM

    ****

    Show More Show Less

    I just wanted to say thanks to 1Cover for making a very stressful situation much easier. It's scary to need medical treatment and surgery overseas, but they were there at any time when we needed, day or night.

    Thanks for your review Kate. We’re so pleased we were able to help you in Japan and hope you are recovering well now.

    Brand Rep · 11/03/2026

    I just wanted to say thanks to 1Cover for making a very stressful situation much easier. It's scary to need medical treatment and surgery overseas, but they were there at...

  • false

    Overall Rating

    Verified Review

    First time cover

    1 April 2025, 12:12 PM

    Katrin McBeth

    Show More Show Less

    First overseas travel in a few years and had to claim flights to a different city as ours were cancelled. From first phone call to email updates everything went smoothly.

    First overseas travel in a few years and had to claim flights to a different city as ours were cancelled. From first phone call to email updates everything went smoothly.

---
import ReviewList from "@page-sections/people/review-list/ReviewList.astro";
---

<ReviewList
accentColor="#d1413d" bodyColor="#1f2937" cardBackgroundColor="#ffffff" colorScheme="light" metaColor="#111827" mutedStarColor="#9ca3af" paddingVertical="xl" ratingLabelColor="#111827" responseBackgroundColor="#f9fafb" responseTextColor="#1f2937" reviews={
  [
    {
      "providerLogoSource": "/src/assets/images/component-docs/website-hero.svg",
      "providerLogoAlt": "1Cover Travel Insurance logo",
      "title": "Best service",
      "commentCountLabel": "1 Comment(s)",
      "dateLabel": "24 February 2026, 1:13 PM",
      "authorName": "****",
      "body": "I just wanted to say thanks to 1Cover for making a very stressful situation much easier. It's scary to need medical treatment and surgery overseas, but they were there at any time when we needed, day or night.",
      "responseBody": "Thanks for your review Kate. We’re so pleased we were able to help you in Japan and hope you are recovering well now.",
      "responseMeta": "Brand Rep · 11/03/2026",
      "overallRatingLabel": "Overall Rating",
      "verifiedLabel": "Verified Review",
      "showMoreText": "Show More",
      "showLessText": "Show Less",
      "filledStars": 5,
      "totalStars": 5,
      "expandedByDefault": true
    },
    {
      "providerLogoSource": "/src/assets/images/component-docs/website-hero.svg",
      "providerLogoAlt": "1Cover Travel Insurance logo",
      "title": "First time cover",
      "commentCountLabel": "",
      "dateLabel": "1 April 2025, 12:12 PM",
      "authorName": "Katrin McBeth",
      "body": "First overseas travel in a few years and had to claim flights to a different city as ours were cancelled. From first phone call to email updates everything went smoothly.",
      "responseBody": "",
      "responseMeta": "",
      "overallRatingLabel": "Overall Rating",
      "verifiedLabel": "Verified Review",
      "showMoreText": "Show More",
      "showLessText": "Show Less",
      "filledStars": 5,
      "totalStars": 5,
      "expandedByDefault": false
    }
  ]
} sectionBackgroundColor="#f8f3f0" titleColor="#1f1f5a" verifiedLabelColor="#6b7280"
/>
---
blocks:
  _component: page-sections/people/review-list
  cardBackgroundColor: '#ffffff'
  sectionBackgroundColor: '#f8f3f0'
  titleColor: '#1f1f5a'
  bodyColor: '#1f2937'
  metaColor: '#111827'
  ratingLabelColor: '#111827'
  verifiedLabelColor: '#6b7280'
  accentColor: '#d1413d'
  mutedStarColor: '#9ca3af'
  responseBackgroundColor: '#f9fafb'
  responseTextColor: '#1f2937'
  reviews:
    - providerLogoSource: /src/assets/images/component-docs/website-hero.svg
      providerLogoAlt: 1Cover Travel Insurance logo
      title: Best service
      commentCountLabel: 1 Comment(s)
      dateLabel: 24 February 2026, 1:13 PM
      authorName: '****'
      body: I just wanted to say thanks to 1Cover for making a very stressful situation much easier. It's scary to need medical treatment and surgery overseas, but they were there at any time when we needed, day or night.
      responseBody: Thanks for your review Kate. We’re so pleased we were able to help you in Japan and hope you are recovering well now.
      responseMeta: Brand Rep · 11/03/2026
      overallRatingLabel: Overall Rating
      verifiedLabel: Verified Review
      showMoreText: Show More
      showLessText: Show Less
      filledStars: 5
      totalStars: 5
      expandedByDefault: true
    - providerLogoSource: /src/assets/images/component-docs/website-hero.svg
      providerLogoAlt: 1Cover Travel Insurance logo
      title: First time cover
      commentCountLabel: ''
      dateLabel: 1 April 2025, 12:12 PM
      authorName: Katrin McBeth
      body: First overseas travel in a few years and had to claim flights to a different city as ours were cancelled. From first phone call to email updates everything went smoothly.
      responseBody: ''
      responseMeta: ''
      overallRatingLabel: Overall Rating
      verifiedLabel: Verified Review
      showMoreText: Show More
      showLessText: Show Less
      filledStars: 5
      totalStars: 5
      expandedByDefault: false
  colorScheme: light
  paddingVertical: xl
---