Review Cards

The Review Cards components helps you to simply create beautiful cards for display customers review or testimonials.

Default Review Card

Mathew Glock

Posted on 28 February

"If you have the opportunity to play this game of life you need to appreciate every moment."

<script setup>
// Vue Material Kit 2 component
import DefaultReviewCard from "@/examples/cards/reviewCards/DefaultReviewCard.vue";

// image
import team2 from "@/assets/img/team-2.jpg";
</script>
<template>
 <DefaultReviewCard
  color="bg-gradient-success"
  :image="team2"
  name="Mathew Glock"
  date="Posted on 28 February"
  review='"If you have the opportunity to play this game of life you need to appreciate every moment."'
  :rating="5"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import DefaultReviewCard from "@/examples/cards/reviewCards/DefaultReviewCard.vue";
4
5// image
6import team2 from "@/assets/img/team-2.jpg";
7</script>
8<template>
9 <DefaultReviewCard
10  color="bg-gradient-success"
11  :image="team2"
12  name="Mathew Glock"
13  date="Posted on 28 February"
14  review='"If you have the opportunity to play this game of life you need to appreciate every moment."'
15  :rating="5"
16 />
17</template>

Props Information

Name	Type	Default	Description
image	string		Used to set the `DefaultReviewCard` client image.
color	'primary''secondary''info''success''warning''danger''error''light''dark'	success	Used to set the `DefaultReviewCard` background color.
name*	string		Used to set the `DefaultReviewCard` client name. Its a required prop.
date*	string		Used to set the `DefaultReviewCard` date. It's a required prop.
review*	string		Used to set the `DefaultReviewCard` client review. It's a required prop.
rating	12345		Used to set the `DefaultReviewCard` rating or stars. Its a required prop.

Simple Review Card

Pro

Olivia Harper

@oliviaharper

The connections you make at Web Summit are unparalleled, we met users all over the world.

<script setup>
// Vue Material Kit 2 component
import SimpleReviewCard from "@/examples/cards/reviewCards/SimpleReviewCard.vue";
 
// image
import oliviaHarper from "@/assets/img/team-2.jpg";
</script>
<template>
 <SimpleReviewCard
   :image="oliviaHarper"
   name="Olivia Harper"
   username="oliviaharper"
   review="The connections you make at Web Summit are unparalleled, we met users all over the world."
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import SimpleReviewCard from "@/examples/cards/reviewCards/SimpleReviewCard.vue";
4 
5// image
6import oliviaHarper from "@/assets/img/team-2.jpg";
7</script>
8<template>
9 <SimpleReviewCard
10   :image="oliviaHarper"
11   name="Olivia Harper"
12   username="oliviaharper"
13   review="The connections you make at Web Summit are unparalleled, we met users all over the world."
14 />
15</template>

Props Information

Name	Type	Description
image*	string	Used to set the `SimpleReviewCard` client image. It's a required prop.
name*	string	Used to set the `SimpleReviewCard` client name. Its a required prop.
username*	string	Used to set the `SimpleReviewCard` client username e.g. twitter username. It's a required prop.
review*	string	Used to set the `SimpleReviewCard` client review. It's a required prop.

Mini Review Card

Pro

"If you have the opportunity to play this game of life you need to appreciate every moment."

Mathew Glock

Posted on 28 February

<script setup>
// Vue Material Kit 2 component
import MiniReviewCard from "@/examples/cards/reviewCards/MiniReviewCard.vue";

// image
import imgReviewer from "@/assets/img/marie.jpg";
</script>
<template>
 <MiniReviewCard
  variant="gradient"
  color="success"
  review='"If you have the opportunity to play this game of life you need to appreciate every moment."'
  :rating="4.5"
  :author="{
    image: imgReviewer,
    name: 'Mathew Glock',
    date: 'Posted on 28 February',
  }"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MiniReviewCard from "@/examples/cards/reviewCards/MiniReviewCard.vue";
4
5// image
6import imgReviewer from "@/assets/img/marie.jpg";
7</script>
8<template>
9 <MiniReviewCard
10  variant="gradient"
11  color="success"
12  review='"If you have the opportunity to play this game of life you need to appreciate every moment."'
13  :rating="4.5"
14  :author="{
15    image: imgReviewer,
16    name: 'Mathew Glock',
17    date: 'Posted on 28 February',
18  }"
19 />
20</template>

Props Information

Name	Type	Default	Description
variant	'gradient''contained''plain'	plain	Used to set the `MiniReviewCard` background color variation.
color	'primary''secondary''info''success''warning''danger''error''light''dark'		Used to set the `MiniReviewCard` background color.
rating*	Number		Used to set the `MiniReviewCard` rating or stars. Its a required prop.
review*	string		Used to set the `MiniReviewCard` client review. It's a required prop.
author*	'image''name''date'		Used to set the `MiniReviewCard` client or author details. Its a required prop.

Complex Review Card

Pro

- Customer Story

Excelent payment service. You guys are the best!

"Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success."

Mathew Glock

Marketing Manager - Slack

<script setup>
// Vue Material Kit 2 component
import ComplexReviewCard from "@/examples/cards/reviewCards/ComplexReviewCard.vue";

// images
import review1 from "@/assets/img/examples/clem-onojegaw.jpg";
import logoSlack from "@/assets/img/logos/small-logos/logo-slack.svg";
</script>
<template>
 <ComplexReviewCard
  :image="review1"
  title=" Excelent payment service. You guys are the best!"
  review='"Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success."'
  :author="{
    logo: logoSlack,
    name: 'Mathew Glock',
    role: 'Marketing Manager - Slack',
  }"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import ComplexReviewCard from "@/examples/cards/reviewCards/ComplexReviewCard.vue";
4
5// images
6import review1 from "@/assets/img/examples/clem-onojegaw.jpg";
7import logoSlack from "@/assets/img/logos/small-logos/logo-slack.svg";
8</script>
9<template>
10 <ComplexReviewCard
11  :image="review1"
12  title=" Excelent payment service. You guys are the best!"
13  review='"Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success."'
14  :author="{
15    logo: logoSlack,
16    name: 'Mathew Glock',
17    role: 'Marketing Manager - Slack',
18  }"
19 />
20</template>

Props Information

Name	Type	Description
image*	string	Used to set the `ComplexReviewCard` client image. It's a required prop.
title*	string	Used to set the `ComplexReviewCard` title. It's a required prop.
review*	string	Used to set the `ComplexReviewCard` client review. It's a required prop.
author*	'logo''name''role'	Used to set the `ComplexReviewCard` client or author details. Its a required prop.