Finding a designer for our launches used to be an obstacle course. Now we post our brief and hear back within the day.
Head of product
SaaS startup
I work on projects that match my skills, with a clear framework. Acme helped me grow my independent practice.
Freelance product designer
Network member
<TestimonialGrid.Root>
<TestimonialGrid.Item>
<TestimonialGrid.QuoteIcon />
<TestimonialGrid.Quote>Finding a designer used to…</TestimonialGrid.Quote>
<TestimonialGrid.Footer>
<TestimonialGrid.Avatar accent="primary">R</TestimonialGrid.Avatar>
<TestimonialGrid.Author>
<TestimonialGrid.AuthorName>Head of product</TestimonialGrid.AuthorName>
<TestimonialGrid.AuthorRole>Early-stage startup</TestimonialGrid.AuthorRole>
</TestimonialGrid.Author>
<TestimonialGrid.Rating />
</TestimonialGrid.Footer>
</TestimonialGrid.Item>
</TestimonialGrid.Root>Avatar takes an initial rather than an image on purpose: a testimonial without
a photo should not look like one that is missing its photo.
API
TestimonialGrid.Root
Plus every <div> prop. Source: landing/components/testimonial-grid/root.tsx.
TestimonialGrid.Author
Plus every <figcaption> prop. Source: landing/components/testimonial-grid/author.tsx.
TestimonialGrid.AuthorName
Plus every <p> prop. Source: landing/components/testimonial-grid/author-name.tsx.
TestimonialGrid.AuthorRole
Plus every <p> prop. Source: landing/components/testimonial-grid/author-role.tsx.
TestimonialGrid.Avatar
| Prop | Type | Default | |
|---|---|---|---|
accent | "highlight" | "primary" | — | Which accent token the quote marks and attribution pick up. |
Plus every <span> prop. Source: landing/components/testimonial-grid/avatar.tsx.
TestimonialGrid.Footer
Plus every <div> prop. Source: landing/components/testimonial-grid/footer.tsx.
TestimonialGrid.Item
Plus every <figure> prop. Source: landing/components/testimonial-grid/item.tsx.
TestimonialGrid.Quote
Plus every <blockquote> prop. Source: landing/components/testimonial-grid/quote.tsx.
TestimonialGrid.QuoteIcon
| Prop | Type | Default | |
|---|---|---|---|
alt | string | — | |
color | string | — | |
mirrored | boolean | — | |
size | string | number | — | |
weight | IconWeight | — |
Plus the DOM props of the element it renders. Source: landing/components/testimonial-grid/quote-icon.tsx.
The five undescribed props on this part are Phosphor's own, shared by every icon in the kit and not annotatable from here — see Icon, which covers what they do.
TestimonialGrid.Rating
| Prop | Type | Default | |
|---|---|---|---|
count | number | 5 | How many stars to fill, out of five. |
Plus every <div> prop. Source: landing/components/testimonial-grid/rating.tsx.