Fulldev UI

Docs Components Blocks

Rating

1
---
import Rating from 'fulldev-ui/components/Rating.astro'
---

<Rating
  avatar="/images/avatars/1.jpeg"
  label="John Doe"
  value={4}
  color="brand"
/>

Props

PropTypeDefault
color'base' | 'brand'-
valuenumber-
sizestring-
labelstring-
avatarsstring[]-
avatarstring-

Examples

1 2 3 4
---
import Rating from 'fulldev-ui/components/Rating.astro'
---

<Rating
  avatars={[
    '/images/avatars/1.jpeg',
    '/images/avatars/2.jpeg',
    '/images/avatars/3.jpeg',
    '/images/avatars/4.jpeg',
  ]}
  label="5.0 out of 86 reviews"
  value={5}
  color="brand"
/>
---
import Rating from 'fulldev-ui/components/Rating.astro'
---

<Rating value={3} color="base" />
<Rating value={5} color="brand" />
---
import Rating from 'fulldev-ui/components/Rating.astro'
---

<Rating value={5} size="sm" />
<Rating value={5} size="md" />
<Rating value={5} size="lg" />