# Headers

> Components for creating headers with different menu layouts and social icons.

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

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

## Header with centered menu

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/header-with-centered-menu

### Tailwind

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

<template>
  <Section class="my-[40px] px-[32px] py-[40px]">
    <Row>
      <Column align="center">
        <Img
          alt="Vuemail logo"
          height="42"
          src="/static/logo-without-background.png"
        />
      </Column>
    </Row>
    <Row class="mt-[40px]">
      <Column align="center">
        <table>
          <tbody>
            <tr>
              <td class="px-[8px]">
                <Link
                  class="text-gray-600 [text-decoration:none]"
                  href="#"
                >About</Link>
              </td>
              <td class="px-[8px]">
                <Link
                  class="text-gray-600 [text-decoration:none]"
                  href="#"
                >Blog</Link>
              </td>
              <td class="px-[8px]">
                <Link
                  class="text-gray-600 [text-decoration:none]"
                  href="#"
                >Company</Link>
              </td>
              <td class="px-[8px]">
                <Link
                  class="text-gray-600 [text-decoration:none]"
                  href="#"
                >Features</Link>
              </td>
            </tr>
          </tbody>
        </table>
      </Column>
    </Row>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section
    :style="{
      paddingTop: '40px',
      paddingBottom: '40px',
      paddingLeft: '32px',
      paddingRight: '32px',
      marginTop: '40px',
      marginBottom: '40px',
    }"
  >
    <Row>
      <Column align="center">
        <Img
          alt="Vuemail logo"
          height="42"
          src="/static/logo-without-background.png"
        />
      </Column>
    </Row>
    <Row :style="{ marginTop: '40px' }">
      <Column align="center">
        <table>
          <tbody>
            <tr>
              <td :style="{ paddingRight: '8px', paddingLeft: '8px' }">
                <Link
                  href="#"
                  :style="{ color: 'rgb(75,85,99)', textDecoration: 'none' }"
                >About</Link>
              </td>
              <td :style="{ paddingRight: '8px', paddingLeft: '8px' }">
                <Link
                  href="#"
                  :style="{ color: 'rgb(75,85,99)', textDecoration: 'none' }"
                >Blog</Link>
              </td>
              <td :style="{ paddingRight: '8px', paddingLeft: '8px' }">
                <Link
                  href="#"
                  :style="{ color: 'rgb(75,85,99)', textDecoration: 'none' }"
                >Company</Link>
              </td>
              <td :style="{ paddingRight: '8px', paddingLeft: '8px' }">
                <Link
                  href="#"
                  :style="{ color: 'rgb(75,85,99)', textDecoration: 'none' }"
                >Features</Link>
              </td>
            </tr>
          </tbody>
        </table>
      </Column>
    </Row>
  </Section>
</template>
```

## Header with side menu

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/header-with-side-menu

### Tailwind

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

<template>
  <Section class="my-[40px] px-[32px] py-[40px]">
    <Row>
      <Column class="w-[80%]">
        <Img
          alt="Vuemail logo"
          height="42"
          src="/static/logo-without-background.png"
        />
      </Column>
      <Column align="right">
        <Row align="right">
          <Column class="px-[8px]">
            <Link
              class="text-gray-600 [text-decoration:none]"
              href="#"
            >About</Link>
          </Column>
          <Column class="px-[8px]">
            <Link
              class="text-gray-600 [text-decoration:none]"
              href="#"
            >Company</Link>
          </Column>
          <Column class="px-[8px]">
            <Link
              class="text-gray-600 [text-decoration:none]"
              href="#"
            >Blog</Link>
          </Column>
        </Row>
      </Column>
    </Row>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section
    :style="{
      paddingTop: '40px',
      paddingBottom: '40px',
      paddingLeft: '32px',
      paddingRight: '32px',
      marginTop: '40px',
      marginBottom: '40px',
    }"
  >
    <Row>
      <Column :style="{ width: '80%' }">
        <Img
          alt="Vuemail logo"
          height="42"
          src="/static/logo-without-background.png"
        />
      </Column>
      <Column align="right">
        <Row align="right">
          <Column :style="{ paddingLeft: '8px', paddingRight: '8px' }">
            <Link
              href="#"
              :style="{ color: 'rgb(75,85,99)', textDecoration: 'none' }"
            >About</Link>
          </Column>
          <Column :style="{ paddingLeft: '8px', paddingRight: '8px' }">
            <Link
              href="#"
              :style="{ color: 'rgb(75,85,99)', textDecoration: 'none' }"
            >Company</Link>
          </Column>
          <Column :style="{ paddingLeft: '8px', paddingRight: '8px' }">
            <Link
              href="#"
              :style="{ color: 'rgb(75,85,99)', textDecoration: 'none' }"
            >Blog</Link>
          </Column>
        </Row>
      </Column>
    </Row>
  </Section>
</template>
```

## Header with social icons

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/header-with-social-icons

### Tailwind

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

<template>
  <Section class="px-[32px] py-[40px]">
    <Row>
      <Column class="w-[80%]">
        <Img
          alt="Vuemail logo"
          width="42"
          height="42"
          src="/static/logo-without-background.png"
        />
      </Column>
      <Column align="right">
        <Row align="right">
          <Column>
            <Link href="#">
              <Img
                alt="X"
                class="mx-[4px]"
                height="36"
                src="/static/x-logo.png"
                width="36"
              />
            </Link>
          </Column>
          <Column>
            <Link href="#">
              <Img
                alt="Instagram"
                class="mx-[4px]"
                height="36"
                src="/static/instagram-logo.png"
                width="36"
              />
            </Link>
          </Column>
          <Column>
            <Link href="#">
              <Img
                alt="Facebook"
                class="mx-[4px]"
                height="36"
                src="/static/facebook-logo.png"
                width="36"
              />
            </Link>
          </Column>
        </Row>
      </Column>
    </Row>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section
    :style="{
      paddingTop: '40px',
      paddingBottom: '40px',
      paddingLeft: '32px',
      paddingRight: '32px',
    }"
  >
    <Row>
      <Column :style="{ width: '80%' }">
        <Img
          alt="Vuemail logo"
          width="42"
          height="42"
          src="/static/logo-without-background.png"
        />
      </Column>
      <Column align="right">
        <Row align="right">
          <Column>
            <Link href="#">
              <Img
                alt="X"
                height="36"
                src="/static/x-logo.png"
                :style="{ marginLeft: '4px', marginRight: '4px' }"
                width="36"
              />
            </Link>
          </Column>
          <Column>
            <Link href="#">
              <Img
                alt="Instagram"
                height="36"
                src="/static/instagram-logo.png"
                :style="{ marginLeft: '4px', marginRight: '4px' }"
                width="36"
              />
            </Link>
          </Column>
          <Column>
            <Link href="#">
              <Img
                alt="Facebook"
                height="36"
                src="/static/facebook-logo.png"
                :style="{ marginLeft: '4px', marginRight: '4px' }"
                width="36"
              />
            </Link>
          </Column>
        </Row>
      </Column>
    </Row>
  </Section>
</template>
```