# Stats

> Stats components for displaying statistics.

Web: https://vuemail.dev/components/stats

Paste any snippet into an email built with Vuemail. The snippets are single file components that use the primitives from `@vuemaildev/vuemail`.

## Stats simple

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/stats-simple

### Tailwind

```vue
<script setup lang="ts">
import ResponsiveColumn from '../_components/responsive-column.vue';
import ResponsiveRow from '../_components/responsive-row.vue';
</script>

<template>
  <ResponsiveRow>
    <ResponsiveColumn>
      <p
        class="m-0 text-left text-[18px] leading-[24px] font-bold tracking-tight text-gray-900 tabular-nums"
      >
        42
      </p>
      <p class="m-0 text-left text-[12px] leading-[18px] text-gray-500">
        The Answer
      </p>
    </ResponsiveColumn>
    <ResponsiveColumn>
      <p
        class="m-0 text-left text-[18px] leading-[24px] font-bold tracking-tight text-gray-900 tabular-nums"
      >
        10M
      </p>
      <p class="m-0 text-left text-[12px] leading-[18px] text-gray-500">
        Days for Earth Mark II
      </p>
    </ResponsiveColumn>
    <ResponsiveColumn>
      <p
        class="m-0 text-left text-[18px] leading-[24px] font-bold tracking-tight text-gray-900 tabular-nums"
      >
        2^276,709:1
      </p>
      <p class="m-0 text-left text-[12px] leading-[18px] text-gray-500">
        Improbability Drive odds
      </p>
    </ResponsiveColumn>
  </ResponsiveRow>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import ResponsiveColumn from '../_components/responsive-column.vue';
import ResponsiveRow from '../_components/responsive-row.vue';
</script>

<template>
  <ResponsiveRow>
    <ResponsiveColumn>
      <p
        :style="{
          margin: '0',
          textAlign: 'left',
          fontSize: '18px',
          lineHeight: '24px',
          fontWeight: 700,
          letterSpacing: '-0.025em',
          color: '#111827',
          fontVariantNumeric: 'tabular-nums',
        }"
      >
        42
      </p>
      <p
        :style="{
          margin: '0',
          textAlign: 'left',
          fontSize: '12px',
          lineHeight: '18px',
          color: '#6b7280',
        }"
      >
        The Answer
      </p>
    </ResponsiveColumn>
    <ResponsiveColumn>
      <p
        :style="{
          margin: '0',
          textAlign: 'left',
          fontSize: '18px',
          lineHeight: '24px',
          fontWeight: 700,
          letterSpacing: '-0.025em',
          color: '#111827',
          fontVariantNumeric: 'tabular-nums',
        }"
      >
        10M
      </p>
      <p
        :style="{
          margin: '0',
          textAlign: 'left',
          fontSize: '12px',
          lineHeight: '18px',
          color: '#6b7280',
        }"
      >
        Days for Earth Mark II
      </p>
    </ResponsiveColumn>
    <ResponsiveColumn>
      <p
        :style="{
          margin: '0',
          textAlign: 'left',
          fontSize: '18px',
          lineHeight: '24px',
          fontWeight: 700,
          letterSpacing: '-0.025em',
          color: '#111827',
          fontVariantNumeric: 'tabular-nums',
        }"
      >
        2^276,709:1
      </p>
      <p
        :style="{
          margin: '0',
          textAlign: 'left',
          fontSize: '12px',
          lineHeight: '18px',
          color: '#6b7280',
        }"
      >
        Improbability Drive odds
      </p>
    </ResponsiveColumn>
  </ResponsiveRow>
</template>
```

## Stats stepped

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/stats-stepped

### Tailwind

```vue
<script setup lang="ts">
import { Column, Row, Section } from '@vuemaildev/vuemail';
</script>

<template>
  <Section>
    <Row class="mb-2">
      <Column class="min-h-[112px] rounded-2xl bg-gray-100 p-4">
        <p
          class="mb-0 text-[24px] leading-[32px] font-bold tracking-tight tabular-nums text-gray-900"
        >
          42
        </p>
        <div class="text-gray-700">
          <p class="mb-0 text-[15px] leading-[22px]">The Answer</p>
          <p class="mb-0 mt-1 text-[13px] leading-[18px] text-gray-600">
            To life, the universe, and everything computed by Deep Thought.
          </p>
        </div>
      </Column>
    </Row>
    <Row class="mb-2">
      <Column class="min-h-[192px] rounded-2xl bg-gray-900 p-4">
        <p
          class="mb-0 text-[24px] leading-[32px] font-bold tracking-tight tabular-nums text-gray-50"
        >
          10M
        </p>
        <div class="text-gray-300">
          <p class="mb-0 text-[15px] leading-[22px]">Years for Earth Mark II</p>
          <p class="mb-0 mt-1 text-[13px] leading-[18px] text-gray-400">
            Time required by Magrathea to build a replacement Earth.
          </p>
        </div>
      </Column>
    </Row>
    <Row>
      <Column class="min-h-[128px] rounded-2xl bg-indigo-700 p-4">
        <p
          class="mb-0 text-[24px] leading-[32px] font-bold tracking-tight tabular-nums text-indigo-50"
        >
          2^276,709:1
        </p>
        <div class="text-indigo-100">
          <p class="mb-0 text-[15px] leading-[22px]">
            Improbability Drive odds
          </p>
          <p class="mb-0 mt-1 text-[13px] leading-[18px] text-indigo-200">
            Chances against successfully activating the infinite improbability
            drive.
          </p>
        </div>
      </Column>
    </Row>
  </Section>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import { Column, Row, Section } from '@vuemaildev/vuemail';
</script>

<template>
  <Section>
    <Row :style="{ marginBottom: '8px' }">
      <Column
        :style="{
          minHeight: '112px',
          borderRadius: '16px',
          backgroundColor: '#f3f4f6',
          padding: '16px',
        }"
      >
        <p
          :style="{
            marginBottom: '0',
            fontSize: '24px',
            lineHeight: '32px',
            fontWeight: 'bold',
            letterSpacing: '-0.025em',
            fontVariantNumeric: 'tabular-nums',
            color: '#111827',
          }"
        >
          42
        </p>
        <div :style="{ color: '#374151' }">
          <p
            :style="{ marginBottom: '0', fontSize: '15px', lineHeight: '22px' }"
          >
            The Answer
          </p>
          <p
            :style="{
              marginBottom: '0',
              marginTop: '4px',
              fontSize: '13px',
              lineHeight: '18px',
              color: '#4b5563',
            }"
          >
            To life, the universe, and everything computed by Deep Thought.
          </p>
        </div>
      </Column>
    </Row>
    <Row :style="{ marginBottom: '8px' }">
      <Column
        :style="{
          minHeight: '192px',
          borderRadius: '16px',
          backgroundColor: '#111827',
          padding: '16px',
        }"
      >
        <p
          :style="{
            marginBottom: '0',
            fontSize: '24px',
            lineHeight: '32px',
            fontWeight: 'bold',
            letterSpacing: '-0.025em',
            fontVariantNumeric: 'tabular-nums',
            color: '#f9fafb',
          }"
        >
          10M
        </p>
        <div :style="{ color: '#d1d5db' }">
          <p
            :style="{ marginBottom: '0', fontSize: '15px', lineHeight: '22px' }"
          >
            Years for Earth Mark II
          </p>
          <p
            :style="{
              marginBottom: '0',
              marginTop: '4px',
              fontSize: '13px',
              lineHeight: '18px',
              color: '#9ca3af',
            }"
          >
            Time required by Magrathea to build a replacement Earth.
          </p>
        </div>
      </Column>
    </Row>
    <Row>
      <Column
        :style="{
          minHeight: '128px',
          borderRadius: '16px',
          backgroundColor: '#4338ca',
          padding: '16px',
        }"
      >
        <p
          :style="{
            marginBottom: '0',
            fontSize: '24px',
            lineHeight: '32px',
            fontWeight: 'bold',
            letterSpacing: '-0.025em',
            fontVariantNumeric: 'tabular-nums',
            color: '#eef2ff',
          }"
        >
          2^276,709:1
        </p>
        <div :style="{ color: '#e0e7ff' }">
          <p
            :style="{ marginBottom: '0', fontSize: '15px', lineHeight: '22px' }"
          >
            Improbability Drive odds
          </p>
          <p
            :style="{
              marginBottom: '0',
              marginTop: '4px',
              fontSize: '13px',
              lineHeight: '18px',
              color: '#c7d2fe',
            }"
          >
            Chances against successfully activating the infinite improbability
            drive.
          </p>
        </div>
      </Column>
    </Row>
  </Section>
</template>
```