# Heading

> Heading components for displaying titles and subtitles with different spacing options.

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

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

## Simple heading

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

### Tailwind

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

<template>
  <Heading class="text-center">Ray Tomlinson</Heading>
</template>
```

### Inline styles

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

<template>
  <Heading :style="{ textAlign: 'center' }">Ray Tomlinson</Heading>
</template>
```

## Multiple headings

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/multiple-headings

### Tailwind

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

<template>
  <Heading as="h1" class="text-center">Jordan Walke</Heading>
  <Heading as="h2" class="text-center">Andrew Clark</Heading>
  <Heading as="h3" class="text-center">Dan Abramov</Heading>
  <Heading as="h4" class="text-center">Jason Bonta</Heading>
  <Heading as="h5" class="text-center">Joe Savona</Heading>
  <Heading as="h6" class="text-center">Josh Story</Heading>
</template>
```

### Inline styles

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

<template>
  <Heading as="h1" :style="{ textAlign: 'center' }">Jordan Walke</Heading>
  <Heading as="h2" :style="{ textAlign: 'center' }">Andrew Clark</Heading>
  <Heading as="h3" :style="{ textAlign: 'center' }">Dan Abramov</Heading>
  <Heading as="h4" :style="{ textAlign: 'center' }">Jason Bonta</Heading>
  <Heading as="h5" :style="{ textAlign: 'center' }">Joe Savona</Heading>
  <Heading as="h6" :style="{ textAlign: 'center' }">Josh Story</Heading>
</template>
```