Preview

Open in new tab

Social proof

Turn customer wins into compelling proof points.

Case Study Metric Cards use Card, StatCard, Avatar, and Badge for high-impact social proof sections.

3

card types

4

metric formats

3

proof patterns

Default

Single metric

Bold stat number with descriptive label and customer logo attribution.

Multi-metric row

Three-column grid: time saved, cost reduced, satisfaction increased.

Customer quote

Avatar, blockquote, name, role, and company with optional video link.

Optimized for: Case study pages, landing page proof sections, and enterprise marketing.
Best paired with: Logo clouds, CTA sections, and testimonial carousels.

Included patterns

• Large metric typography

• Customer avatar attribution

• Company logo badges

• Blockquote styling

Variants

Single metric callout

Large stat number with context label and customer attribution.

Multi-metric row

Three-up metric cards showing key outcomes from a case study.

Customer quote card

Testimonial card with avatar, quote, role, and company.

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}>Turn customer wins into compelling proof points.</Heading>
    <Text as="p">Case Study Metric Cards use Card, StatCard, Avatar, and Badge for high-impact social proof sections.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Use metric cards</Button>
        <Button variant="outline">See proof patterns</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">card types</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">metric formats</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">proof patterns</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">Default</Badge>
            <Heading level={3}>Single metric</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Bold stat number with descriptive label and customer logo attribution.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Multi-metric row</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Three-column grid: time saved, cost reduced, satisfaction increased.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Customer quote</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Avatar, blockquote, name, role, and company with optional video link.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Optimized for</DescriptionList.Term>
        <DescriptionList.Description>Case study pages, landing page proof sections, and enterprise marketing.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Best paired with</DescriptionList.Term>
        <DescriptionList.Description>Logo clouds, CTA sections, and testimonial carousels.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Large metric typography</Text>
        <Text as="p">• Customer avatar attribution</Text>
        <Text as="p">• Company logo badges</Text>
        <Text as="p">• Blockquote styling</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>