Components

Testimonial card

Showcases user feedback or customer quotes in a styled card layout, commonly used in marketing pages to build trust and credibility.

Component

View code

Show playground

Text

John DoeSoftware Engineer

Props

Props	Default	Type
`displayName`	`John Doe`	`string`
`role`	—	`string`
`imgUrl`	—	`string`
`text`	`Text`	`string`
`ratingValue`	—	`number`
`ratingStarColor`	`RatingItemColor.GOLD`	`string`
`isDivided`	—	`boolean`

Usage

displayName

Sets the display for the author of the testimonial.

 <template>
    <TestimonialCard 
        displayName="John Doe"
    />
</template>

Type: string
Default: 'John Doe'

role

Sets the role of the author.

 <template>
    <TestimonialCard 
        role="Software Engineer"
    />
</template>

Type: string

imgUrl

Sets the image url of the author's avatar.

 <template>
    <TestimonialCard 
        imgUrl="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
    />
</template>

Type: string

text

Sets the message text.

 <template>
    <TestimonialCard 
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    />
</template>

Type: string

ratingValue

Sets the rating value. The value must be between 0 and 5.

 <template>
    <TestimonialCard 
        :ratingValue="4.5"
    />
</template>

Type: number

ratingStarColor

Sets the color of the rating stars. Uses the RatingItemColor enum.

 <template>
    <TestimonialCard 
        :ratingStarColor="RatingItemColor.GOLD"
    />
</template>

Type: RatingItemColor
Default: RatingItemColor.GOLD

Options

Value	Description
`GOLD`	Uses gold color for the rating stars.
`PRIMARY_BRAND`	Uses primary brand color for the rating stars.

isDivided

Moves the author to the footer and sets a divider between the author and the message.

 <template>
    <TestimonialCard 
        isDivided
    />
</template>

Type: boolean
Default: false