# Footers

> Footer components with various column layouts.

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

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

## Footer with one column

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/footer-with-one-column

### Tailwind

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

<template>
  <Section class="text-center">
    <table class="w-full">
      <tbody>
        <tr class="w-full">
          <td align="center">
            <Img
              alt="Vuemail logo"
              height="42"
              src="/static/logo-without-background.png"
              width="42"
            />
          </td>
        </tr>
        <tr class="w-full">
          <td align="center">
            <Text
              class="my-[8px] font-semibold text-[16px] text-gray-900 leading-[24px]"
            >
              Acme corporation
            </Text>
            <Text
              class="mt-[4px] mb-0 text-[16px] text-gray-500 leading-[24px]"
            >
              Think different
            </Text>
          </td>
        </tr>
        <tr>
          <td align="center">
            <Row class="table-cell h-[44px] w-[56px] align-bottom">
              <Column class="pr-[8px]">
                <Link href="#">
                  <Img
                    alt="Facebook"
                    height="36"
                    src="/static/facebook-logo.png"
                    width="36"
                  />
                </Link>
              </Column>
              <Column class="pr-[8px]">
                <Link href="#">
                  <Img
                    alt="X"
                    height="36"
                    src="/static/x-logo.png"
                    width="36"
                  />
                </Link>
              </Column>
              <Column>
                <Link href="#">
                  <Img
                    alt="Instagram"
                    height="36"
                    src="/static/instagram-logo.png"
                    width="36"
                  />
                </Link>
              </Column>
            </Row>
          </td>
        </tr>
        <tr>
          <td align="center">
            <Text
              class="my-[8px] font-semibold text-[16px] text-gray-500 leading-[24px]"
            >
              123 Main Street Anytown, CA 12345
            </Text>
            <Text
              class="mt-[4px] mb-0 font-semibold text-[16px] text-gray-500 leading-[24px]"
            >
              mail@example.com +123456789
            </Text>
          </td>
        </tr>
      </tbody>
    </table>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section :style="{ textAlign: 'center' }">
    <table :style="{ width: '100%' }">
      <tbody>
        <tr :style="{ width: '100%' }">
          <td align="center">
            <Img
              alt="Vuemail logo"
              height="42"
              src="/static/logo-without-background.png"
              width="42"
            />
          </td>
        </tr>
        <tr :style="{ width: '100%' }">
          <td align="center">
            <Text
              :style="{
                marginTop: '8px',
                marginBottom: '8px',
                fontSize: '16px',
                lineHeight: '24px',
                fontWeight: 600,
                color: 'rgb(17,24,39)',
              }"
            >
              Acme corporation
            </Text>
            <Text
              :style="{
                marginTop: '4px',
                marginBottom: '0px',
                fontSize: '16px',
                lineHeight: '24px',
                color: 'rgb(107,114,128)',
              }"
            >
              Think different
            </Text>
          </td>
        </tr>
        <tr>
          <td align="center">
            <Row
              :style="{
                display: 'table-cell',
                height: '44px',
                width: '56px',
                verticalAlign: 'bottom',
              }"
            >
              <Column :style="{ paddingRight: '8px' }">
                <Link href="#">
                  <Img
                    alt="Facebook"
                    height="36"
                    src="/static/facebook-logo.png"
                    width="36"
                  />
                </Link>
              </Column>
              <Column :style="{ paddingRight: '8px' }">
                <Link href="#">
                  <Img
                    alt="X"
                    height="36"
                    src="/static/x-logo.png"
                    width="36"
                  />
                </Link>
              </Column>
              <Column>
                <Link href="#">
                  <Img
                    alt="Instagram"
                    height="36"
                    src="/static/instagram-logo.png"
                    width="36"
                  />
                </Link>
              </Column>
            </Row>
          </td>
        </tr>
        <tr>
          <td align="center">
            <Text
              :style="{
                marginTop: '8px',
                marginBottom: '8px',
                fontSize: '16px',
                lineHeight: '24px',
                fontWeight: 600,
                color: 'rgb(107,114,128)',
              }"
            >
              123 Main Street Anytown, CA 12345
            </Text>
            <Text
              :style="{
                marginTop: '4px',
                marginBottom: '0px',
                fontSize: '16px',
                lineHeight: '24px',
                fontWeight: 600,
                color: 'rgb(107,114,128)',
              }"
            >
              mail@example.com +123456789
            </Text>
          </td>
        </tr>
      </tbody>
    </table>
  </Section>
</template>
```

## Footer with two columns

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/footer-with-two-columns

### Tailwind

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

<template>
  <Section>
    <Row>
      <Column :colspan="4">
        <Img
          alt="Vuemail logo"
          height="42"
          src="/static/logo-without-background.png"
        />
        <Text
          class="my-[8px] font-semibold text-[16px] text-gray-900 leading-[24px]"
        >
          Acme corporation
        </Text>
        <Text
          class="mt-[4px] mb-[0px] text-[16px] text-gray-500 leading-[24px]"
        >
          Think different
        </Text>
      </Column>
      <Column align="left" class="table-cell align-bottom">
        <Row class="table-cell h-[44px] w-[56px] align-bottom">
          <Column class="pr-[8px]">
            <Link href="#">
              <Img
                alt="Facebook"
                height="36"
                src="/static/facebook-logo.png"
                width="36"
              />
            </Link>
          </Column>
          <Column class="pr-[8px]">
            <Link href="#">
              <Img alt="X" height="36" src="/static/x-logo.png" width="36" />
            </Link>
          </Column>
          <Column>
            <Link href="#">
              <Img
                alt="Instagram"
                height="36"
                src="/static/instagram-logo.png"
                width="36"
              />
            </Link>
          </Column>
        </Row>
        <Row>
          <Text
            class="my-[8px] font-semibold text-[16px] text-gray-500 leading-[24px]"
          >
            123 Main Street Anytown, CA 12345
          </Text>
          <Text
            class="mt-[4px] mb-[0px] font-semibold text-[16px] text-gray-500 leading-[24px]"
          >
            mail@example.com +123456789
          </Text>
        </Row>
      </Column>
    </Row>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section>
    <Row>
      <Column :colspan="4">
        <Img
          alt="Vuemail logo"
          height="42"
          src="/static/logo-without-background.png"
        />
        <Text
          :style="{
            marginTop: '8px',
            marginBottom: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Acme corporation
        </Text>
        <Text
          :style="{
            marginTop: '4px',
            marginBottom: '0px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Think different
        </Text>
      </Column>
      <Column
        align="left"
        :style="{ display: 'table-cell', verticalAlign: 'bottom' }"
      >
        <Row
          :style="{
            display: 'table-cell',
            height: '44px',
            width: '56px',
            verticalAlign: 'bottom',
          }"
        >
          <Column :style="{ paddingRight: '8px' }">
            <Link href="#">
              <Img
                alt="Facebook"
                height="36"
                src="/static/facebook-logo.png"
                width="36"
              />
            </Link>
          </Column>
          <Column :style="{ paddingRight: '8px' }">
            <Link href="#">
              <Img alt="X" height="36" src="/static/x-logo.png" width="36" />
            </Link>
          </Column>
          <Column>
            <Link href="#">
              <Img
                alt="Instagram"
                height="36"
                src="/static/instagram-logo.png"
                width="36"
              />
            </Link>
          </Column>
        </Row>
        <Row>
          <Text
            :style="{
              marginTop: '8px',
              marginBottom: '8px',
              fontSize: '16px',
              lineHeight: '24px',
              fontWeight: 600,
              color: 'rgb(107,114,128)',
            }"
          >
            123 Main Street Anytown, CA 12345
          </Text>
          <Text
            :style="{
              marginTop: '4px',
              marginBottom: '0px',
              fontSize: '16px',
              lineHeight: '24px',
              fontWeight: 600,
              color: 'rgb(107,114,128)',
            }"
          >
            mail@example.com +123456789
          </Text>
        </Row>
      </Column>
    </Row>
  </Section>
</template>
```