Testimonial
The `<pura-testimonial>` displays a testimonial or quote as a figure: a large decorative quotation mark, the quote text (default slot), an optional star rating, and an author line with avatar, name, and role. Use it for social proof, customer testimonials, or review highlights. It is purely display-oriented (it emits no events), but it has an agent-native layer: each instance mirrors its state in stable `data-pura-testimonial-*` attributes on the host and registers itself in `window.__puraTestimonials` (a map indexed by `data-pura-id`), letting agents enumerate and read all the testimonials on the page without crossing the shadow DOM boundary.
Preview
<pura-testimonial
author="Mariana Lopes"
role="CEO, Aurora Tech"
avatar="https://i.pravatar.cc/120?img=47"
rating="4.5"
max="5">
Moving to pura was the best decision our team made. Zero dependencies, native components, and everything worked on the first try in our stack.
</pura-testimonial>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
author | string | — | Name of the testimonial's author. When there is no avatar, the name's initials are used instead. |
role | string | — | Role / company shown below the author's name. |
avatar | string | — | URL of the avatar image. Without it, it falls back to the author's initials. |
rating | number | (none) | Star rating from 0 to max. Omitted => no stars are shown. Accepts fractional values (e.g. 4.5). |
max | number | 5 | Number of stars when rating is present. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/testimonial.js"></script>import "./pura/lib/testimonial.js";