Testimonial - Primer

Ready to use


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&apos;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&apos;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&apos;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&apos;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&apos;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&apos;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&apos;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&apos;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	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	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	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