OsirionTestimonialCard shows a quote with the name, photo, position and company of the person who said it, an
optional one to five star rating and an optional link to the full text. Use it on its own or let
OsirionTestimonialCarousel render a row of them. It needs no script.
Usage
<OsirionTestimonialCard Name="Ana Petrović"
TestimonialText="We moved our documentation site to static SSR in a weekend." />
A card with a photo, rating and link to the case study:
<OsirionTestimonialCard Name="Ana Petrović"
Position="Engineering lead"
Company="Example Ltd"
ProfileImageUrl="/images/people/ana.jpg"
LinkedInUrl="https://www.linkedin.com/in/example"
TestimonialText="We moved our documentation site to static SSR in a weekend."
ShowRating="true"
Rating="5"
ReadMoreHref="/case-studies/example"
ReadMoreText="Read the case study"
IsFirstVisible="true" />
For formatted text, pass TestimonialContent instead of TestimonialText:
<OsirionTestimonialCard Name="Ana Petrović">
<TestimonialContent>
<p>Page weight went <strong>down</strong> and our search traffic went up.</p>
</TestimonialContent>
</OsirionTestimonialCard>
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Name |
string |
"" |
Required. The person's name, rendered in a cite element. |
Position |
string? |
null |
Job title. With Company it reads "Position at Company". |
Company |
string? |
null |
Company name. |
ProfileImageUrl |
string? |
null |
Photo; its alternative text is built from the name, position and company. |
ImageSize |
int |
64 |
Photo width and height in pixels. Left at 64, it becomes 48 for Small and 80 for Large. |
IsFirstVisible |
bool |
false |
Loads the photo eagerly with fetchpriority="high"; otherwise it loads lazily. |
LinkedInUrl |
string? |
null |
Turns the name into a link that opens in a new tab with rel="noopener noreferrer". |
TestimonialText |
string? |
null |
The quote as plain text. |
TestimonialContent |
RenderFragment? |
null |
The quote as markup; replaces TestimonialText. |
ChildContent |
RenderFragment? |
null |
Extra content under the quote. |
ShowRating |
bool |
false |
Shows the star rating. |
Rating |
int |
5 |
Number of filled stars, clamped to 0 to 5; 0 hides the rating. |
ReadMoreHref |
string? |
null |
Shows a read more link when set. |
ReadMoreText |
string |
"Read full testimonial" |
Link text. |
ReadMoreVariant |
ReadMoreVariant |
Default |
Default, Arrow, External, Download, Plain or Button. |
ReadMoreTarget |
string? |
null |
Link target, for example _blank. |
Variant |
TestimonialVariant |
Default |
Default, Minimal, Highlighted or Compact. |
Size |
TestimonialSize |
Normal |
Small, Normal or Large. |
Elevated |
bool? |
null |
Raised look with a drop shadow; null means on. |
Borderless |
bool |
false |
Removes the border and background. |
IsHiddenFromAssistiveTech |
bool |
false |
Sets tabindex="-1" on the links, for copies inside an aria-hidden container such as a looping carousel. |
Theme |
ThemeMode |
System |
Light or Dark forces the card's colors; System follows the page. |
Class |
string? |
null |
Extra CSS classes. |
Style |
string? |
null |
Inline style. |
Behavior
- The rating is an element with
role="img"and the label "Rating: 5 out of 5 stars"; the star icons are hidden from assistive technology. - The quote sits in a
blockquote. PlainTestimonialTextis clamped to four lines on a normal card (two onSmall,MinimalandCompact, five onLarge), so keep quotes short or link to the full text. - The card has a fixed height range (280px to 320px on a normal card), so cards in a row line up.
- Text is HTML-encoded.
LinkedInUrlandReadMoreHrefare written as given, so pass URLs your application controls. - The generated alternative text and labels ("Profile photo of", "at", "View ... LinkedIn profile") are English.
Styling
The root element has osirion-testimonial-card plus osirion-testimonial-{variant}, osirion-testimonial-{size},
osirion-testimonial-theme-{theme} and, when set, osirion-testimonial-elevated and osirion-testimonial-borderless.
Set these custom properties on the card or a parent to change its look:
| Custom property | Default |
|---|---|
--osirion-testimonial-card-background |
the primary background at 72% opacity |
--osirion-testimonial-card-border |
the primary text color at 10% opacity |
--osirion-testimonial-card-radius |
--osirion-radius-xl |
--osirion-testimonial-card-shadow |
a thin inset highlight |
--osirion-testimonial-action-color |
--osirion-text-primary, for the read more link |
--osirion-testimonial-action-hover-color |
--osirion-text-primary |
Related
Related Articles
