Testimonials
Single large quote
One quote given the whole width, in a large type size with the author beneath. For the one customer who said it best.
Live demo
Full width · the frame has its own viewport, so the breakpoints are real
What it uses
Imports
import { Avatar, Container, Heading, Section, Stack, Text } from '@the_viveksingh/vivek-ui'The block
This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.
import { Avatar, Container, Heading, Section, Stack, Text } from '@the_viveksingh/vivek-ui'
export default function TestimonialsSingleQuote() {
return (
<Section background="muted">
<Container size="md">
<Stack align="center" gap={6} style={{ textAlign: 'center' }}>
<Heading level={2} size="xl" style={{ fontWeight: 500 }}>
“We shipped the redesign in six weeks instead of the quarter we had budgeted. The
library did the part of the work nobody enjoys.”
</Heading>
<Stack align="center" gap={2}>
<Avatar name="Aditi Menon" size="lg" />
<Text weight="medium">Aditi Menon</Text>
<Text size="sm" tone="muted">
VP Engineering, Northgate
</Text>
</Stack>
</Stack>
</Container>
</Section>
)
}