Preview

Open in new tab

Proof metrics

Drop in stats that feel intentional, not bolted on.

Stats blocks package number hierarchy, labels, and optional supporting copy.

1.9M

workspaces launched

84k

weekly active editors

42%

avg. approval time cut

Designed for: Hero proof strips, case study intros, and investor-style summaries.

Variants

Hero stats

Metrics that sit directly beneath a hero.

Section stats

Standalone stat row for supporting proof.

Card stats

Metrics inside cards for more narrative context.

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}>Drop in stats that feel intentional, not bolted on.</Heading>
    <Text as="p">Stats blocks package number hierarchy, labels, and optional supporting copy.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open stat blocks</Button>
        <Button variant="outline">Use with testimonials</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>1.9M</Heading>
          <Text as="p">workspaces launched</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>84k</Heading>
          <Text as="p">weekly active editors</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>42%</Heading>
          <Text as="p">avg. approval time cut</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Designed for</DescriptionList.Term>
        <DescriptionList.Description>Hero proof strips, case study intros, and investor-style summaries.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
  </Stack>
</Container>