import {Testimonial} from '@primer/react-brand'
Examples
Default
<Testimonial> <Testimonial.Quote> GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line of code we're writing. </Testimonial.Quote> <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name> <Testimonial.Avatar src="/images/avatar-mona.png" alt="Circular avatar from David Ross's GitHub profile" /> </Testimonial>
Variants
For an alternative visual appearance and layout, without altering semantic meaning.
<Stack direction="horizontal" gap="spacious" padding="none"> <Testimonial variant="default"> <Testimonial.Quote> GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line of code we're writing. </Testimonial.Quote> <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name> <Testimonial.Avatar src="/images/avatar-mona.png" alt="Circular avatar from David Ross's GitHub profile" /> </Testimonial> <Testimonial variant="subtle"> <Testimonial.Quote> GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line of code we're writing. </Testimonial.Quote> <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name> <Testimonial.Avatar src="/images/avatar-mona.png" alt="Circular avatar from David Ross's GitHub profile" /> </Testimonial> </Stack>
Logo
A logo (or similar) visual can be provided as an alternative to avatars.
<Testimonial> <Testimonial.Quote> GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line of code we're writing. </Testimonial.Quote> <Testimonial.Name>David Ross</Testimonial.Name> <Testimonial.Logo> <img alt="GitHub Logo" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png" width={60} /> </Testimonial.Logo> </Testimonial>
Size
Use size
to alternate the text size. Available options are small
(default) and large
.
<Testimonial size="large"> <Testimonial.Quote> GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line of code we're writing. </Testimonial.Quote> <Testimonial.Name position="Staff Software Engineer">David Ross</Testimonial.Name> </Testimonial>
Layout
Testimonial
will expand to fill the width of its parent by default.
Use Stack
to help position multiple, adjacent Testimonials alongside one another.
<Stack direction="horizontal" gap="spacious" padding="spacious"> <Testimonial> <Testimonial.Quote> GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line of code we're writing. </Testimonial.Quote> <Testimonial.Name>David Ross</Testimonial.Name> </Testimonial> <Testimonial> <Testimonial.Quote> GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line of code we're writing. </Testimonial.Quote> <Testimonial.Name>David Ross</Testimonial.Name> </Testimonial> </Stack>
Position
Pass additional content about the testimonial provider using position
.
<Testimonial> <Testimonial.Quote> GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line of code we're writing. </Testimonial.Quote> <Testimonial.Name position="Staff Software Engineer">David Ross</Testimonial.Name> </Testimonial>
Component props
Testimonial Required
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 | |
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' 'blue-purple' 'green-blue' 'pink-blue' 'purple-red' 'red-orange' | 'default' | Color or gradient fill of the the quote mark. |
variant | 'subtle' 'default' 'minimal' | 'minimal' | Alternative visual appearance |
Testimonial.Name Required
Testimonial.Name
indicates the name of the person (or organisation) that provided the testimonial.
Name | Type | Default | 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
Testimonial.Avatar
represent users or organizations.
Name | Type | Default | 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
Testimonial.Logo
passes a visual that represents the users or organizations.
Name | Type | Default | 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 |