Testimonial - Primer

Ready to use


import {Testimonial} from '@primer/react-brand'

Examples

For an alternative visual appearance and layout, without altering semantic meaning.

A logo (or similar) visual can be provided as an alternative to avatars.

Use size to alternate the text size. Available options are small (default) and large.

Testimonial will expand to fill the width of its parent by default.

Use Stack to help position multiple, adjacent Testimonials alongside one another.

Use the expressive variant to place the quote on the left and the attribution on the right.

Pass additional content about the testimonial provider using position.

Testimonial passes contextual data to its child inputs, labels, validation messaging and more.

Name	Type	Default	Description
`children`	`'Testimonial.Quote'` `'Testimonial.Name'` `'Testimonial.Logo'` `'Testimonial.Avatar'` `'React.ReactNode'`		Valid child nodes
`className`	`string`		Sets a custom class
`quoteMarkClassName`	`string`		Class applied to the quote mark.
`mediaClassName`	`string`		Class applied to the attribution wrapper.
`id`	`string`		Sets a custom id
`ref`	`React.RefObject`		Forward a Ref to the underlying DOM node
`size`	`'small'` `'large'`	`'small'`	Set size of quote’s text
`quoteMarkColor`	`'default'` `'blue'` `'coral'` `'green'` `'gray'` `'indigo'` `'lemon'` `'lime'` `'orange'` `'pink'` `'purple'` `'red'` `'teal'` `'yellow'`	`'green'`	Solid color of the quote mark.
`variant`	`'subtle'` `'default'` `'minimal'` `'expressive'`	`'minimal'`	Alternative visual appearance.
`hasBorder`	`boolean`	`true`	Applies an optional border where a variant supports it.

Testimonial.Name indicates the name of the person (or organisation) that provided the testimonial.

Name	Type	Description
`children`	`string`	Label text
`className`	`string`	Applies a custom class
`id`	`string`	Sets a custom id
`ref`	`React.RefObject`	Forward a Ref to the underlying DOM node
`position`	`string`	Optional. Applies additional content adjancent to the primary text.

Testimonial.Avatar represent users or organizations.

Name	Type	Description
`children`	`string`	Label text
`className`	`string`	Applies a custom class
`id`	`string`	Sets a custom id
`ref`	`React.RefObject`	Forward a Ref to the underlying DOM node
`src`	`string`	Required. A url to the user or organisations GitHub profile avatar
`alt`	`string`	Required. Applied as alt text to the avatar.

Testimonial.Logo passes a visual that represents the users or organizations.

Name	Type	Description
`children`	`'SVGElement'` `'HTMLImageElement'`	Accepts `<img>` and `<svg>` HTML elements as children.
`className`	`string`	Applies a custom class
`id`	`string`	Sets a custom id
`ref`	`React.RefObject`	Forward a Ref to the underlying DOM node