Theme
← Blocks
Marketing Block family Landing pages, pricing pages, and case-study hubs

Testimonials

Package customer quotes, logos, and role metadata in reusable cards.

Preview

Open in new tab
Customer proof

Tell the story with customers, not just feature claims.

Testimonial blocks include role lines, logos, and quote treatments tuned for marketing pages.

3-up

Quote grid

Great for landing and pricing pages.

Hero quote

Single premium quote with logo and role line.

Customer reel

Compact list for dense lower-page proof.

Includes
Logo space, role metadata, and proof badge positioning.

Variants

Quote grid

Three-up testimonial cards.

Hero quote

Large pull quote for premium proof placement.

Customer reel

Compact quote list for lower-page proof.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Badge, Button, Card, Container, DescriptionList, Fieldset, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Marketing</Badge>
    <Heading level={1}>Tell the story with customers, not just feature claims.</Heading>
    <Text as="p">Testimonial blocks include role lines, logos, and quote treatments tuned for marketing pages.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open testimonials</Button>
        <Button variant="outline">Pair with logo cloud</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">3-up</Badge>
            <Heading level={3}>Quote grid</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Great for landing and pricing pages.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Hero quote</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Single premium quote with logo and role line.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Customer reel</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Compact list for dense lower-page proof.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Includes</DescriptionList.Term>
        <DescriptionList.Description>Logo space, role metadata, and proof badge positioning.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
  </Stack>
</Container>