Components
TestimonialCard
Unstable: a real, attributed customer quote in a figure, with the person's name, job and avatar. Import it from @nizivo/react/unstable/testimonial-card.
Examples
Basic
A quote with its author. Use real, attributed quotes only; this copy is a placeholder.
We rebuilt our checkout in two weeks and the accessibility review came back clean the first time.
import type { JSX } from 'react';
import { Avatar } from '@nizivo/react/avatar';
import { TestimonialCard } from '@nizivo/react/unstable/testimonial-card';
export function TestimonialCardExample(): JSX.Element {
return (
<TestimonialCard
quote="We rebuilt our checkout in two weeks and the accessibility review came back clean the first time."
name="Maya Lindqvist"
jobTitle="Founder, Moss & Kiln"
avatar={<Avatar name="Maya Lindqvist" size="lg" decorative />}
/>
);
}
Import
import { TestimonialCard } from '@nizivo/react/unstable/testimonial-card';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/testimonial-card.css';Static or interactive
Server. No client JavaScript. How to choose.
Use
quote is a <blockquote> (cite takes its source) and name, jobTitle and avatar are its
<figcaption>. The quote mark is decoration. Use real, attributed quotes only.
Props
Server component Renders data-slot="testimonial-card" with the class nz-testimonial-card. Props: TestimonialCardProps. Source: src/unstable/testimonial-card/testimonial-card.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
avatar | ReactNode | – | An Avatar (lg); decorative, since the name is printed beside it. |
cite | string | – | The quote's source, a URL, for |
jobTitle | ReactNode | – | Their job and company: "Founder, Moss & Kiln". |
namerequired | ReactNode | – | Who said it. |
quoterequired | ReactNode | – | The quote, as said. |
render | RenderProp<Record<string, never>> | – | Must render a |
- Also takes every attribute of
<figure>exceptchildren. (Omit<ComponentPropsWithRef<"figure">, "children">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
TestimonialCardPropstypeimport type { TestimonialCardProps } from '@nizivo/react/unstable/testimonial-card'The props of
TestimonialCard, listed above.
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
testimonial-card.nz-testimonial-card | TestimonialCardroot (takes render) | none |
testimonial-card-author.nz-testimonial-card-author | TestimonialCardinner element (CSS only) | none |
testimonial-card-quote.nz-testimonial-card-quote | TestimonialCardinner element (CSS only) | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
This stylesheet reads no public hook.
Layers: nz.components. Classes: .nz-testimonial-card, .nz-testimonial-card-author, .nz-testimonial-card-avatar, .nz-testimonial-card-mark, .nz-testimonial-card-name, .nz-testimonial-card-name-block, .nz-testimonial-card-quote, .nz-testimonial-card-role.
Tokens this stylesheet reads (14)
--nz-bg-surface, --nz-border-subtle, --nz-border-width-default, --nz-font-body-l, --nz-font-body-s, --nz-font-label-m-strong, --nz-icon-brand, --nz-radius-xl, --nz-space-1, --nz-space-3, --nz-space-5, --nz-space-6, --nz-text-primary, --nz-text-secondary
Accessibility
Nothing in this component takes focus or keyboard input.
Keyboard
None.
Tag
Unstable: a filter chip or a removable token, 32 px and fully rounded, that toggles with a check and removes with its own named button. Import it from @nizivo/react/unstable/tag.
Text
Body, label, numeric and mono text in the Nizivo text styles and text colours, as a paragraph or any element through render.