# Marketing

> Marketing components for creating surveys and checkout forms.

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

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

## Bento Grid

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/bento-grid

### Tailwind

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

const products = [
  {
    imageUrl: '/static/atmos-vacuum-canister.jpg',
    altText: 'Auto-Sealing Vacuum Canister',
    title: 'Auto-Sealing Vacuum Canister',
    description:
      'A container that automatically creates an airtight seal with a button press.',
    linkUrl: '#',
  },
  {
    imageUrl: '/static/vacuum-canister-clear-glass-bundle.jpg',
    altText: '3-Pack Vacuum Containers',
    title: '3-Pack Vacuum Containers',
    description:
      'Keep your coffee fresher for longer with this set of high-performance vacuum containers.',
    linkUrl: '#',
  },
];
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Preview>Coffee Storage</Preview>
      <Container
        class="bg-white rounded-[8px] mx-auto max-w-[900px] overflow-hidden p-0"
      >
        <Section>
          <Row
            class="bg-[rgb(41,37,36)] border-separate [border-spacing:24px] m-0 table-fixed w-full"
          >
            <Column class="pl-[12px]">
              <Heading
                as="h1"
                class="text-white text-[28px] font-bold mb-[10px]"
              >
                Coffee Storage
              </Heading>
              <Text class="text-white/60 text-[14px] leading-[20px] m-0">
                Keep your coffee fresher for longer with innovative technology.
              </Text>
              <Link
                href="#"
                class="text-white/80 block text-[14px] leading-[20px] font-semibold mt-[12px] no-underline"
              >Shop now →</Link>
            </Column>
            <Column class="w-[42%] h-[250px]">
              <Img
                src="/static/coffee-bean-storage.jpg"
                alt="Coffee Bean Storage"
                class="rounded-[4px] h-full -mr-[6px] object-cover object-center w-full"
              />
            </Column>
          </Row>
        </Section>
        <Section class="mb-[24px]">
          <Row class="border-separate [border-spacing:12px] table-fixed w-full">
            <Column
              v-for="product in products"
              :key="product.title"
              class="mx-auto max-w-[180px]"
            >
              <Img
                :src="product.imageUrl"
                :alt="product.altText"
                class="rounded-[4px] mb-[18px] w-full"
              />
              <div>
                <Heading
                  as="h2"
                  class="text-[14px] leading-[20px] font-bold mb-[8px]"
                >
                  {{ product.title }}
                </Heading>
                <Text
                  class="text-gray-500 text-[12px] leading-[20px] m-0 pr-[12px]"
                >
                  {{ product.description }}
                </Text>
              </div>
            </Column>
          </Row>
        </Section>
      </Container>
    </Body>
  </Html>
</template>
```

### Inline styles

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

const products = [
  {
    imageUrl: '/static/atmos-vacuum-canister.jpg',
    altText: 'Auto-Sealing Vacuum Canister',
    title: 'Auto-Sealing Vacuum Canister',
    description:
      'A container that automatically creates an airtight seal with a button press.',
    linkUrl: '#',
  },
  {
    imageUrl: '/static/vacuum-canister-clear-glass-bundle.jpg',
    altText: '3-Pack Vacuum Containers',
    title: '3-Pack Vacuum Containers',
    description:
      'Keep your coffee fresher for longer with this set of high-performance vacuum containers.',
    linkUrl: '#',
  },
];
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Preview>Coffee Storage</Preview>
      <Container
        :style="{
          backgroundColor: 'rgb(255,255,255)',
          borderRadius: '8px',
          marginLeft: 'auto',
          marginRight: 'auto',
          maxWidth: '900px',
          overflow: 'hidden',
          padding: '0px',
        }"
      >
        <Section>
          <Row
            :style="{
              backgroundColor: 'rgb(41,37,36)',
              borderCollapse: 'separate',
              borderSpacing: '24px',
              margin: '0px',
              tableLayout: 'fixed',
              width: '100%',
            }"
          >
            <Column :style="{ paddingLeft: '12px' }">
              <Heading
                as="h1"
                :style="{
                  color: 'rgb(255,255,255)',
                  fontSize: '28px',
                  fontWeight: '700',
                  marginBottom: '10px',
                }"
              >
                Coffee Storage
              </Heading>
              <Text
                :style="{
                  color: 'rgb(255,255,255,0.6)',
                  fontSize: '14px',
                  lineHeight: '20px',
                  margin: '0px',
                }"
              >
                Keep your coffee fresher for longer with innovative technology.
              </Text>
              <Link
                href="#"
                :style="{
                  color: 'rgb(255,255,255,0.8)',
                  display: 'block',
                  fontSize: '14px',
                  lineHeight: '20px',
                  fontWeight: '600',
                  marginTop: '12px',
                  textDecorationLine: 'none',
                }"
              >Shop now →</Link>
            </Column>
            <Column :style="{ width: '42%', height: '250px' }">
              <Img
                src="/static/coffee-bean-storage.jpg"
                alt="Coffee Bean Storage"
                :style="{
                  borderRadius: '4px',
                  height: '100%',
                  marginRight: '-6px',
                  objectFit: 'cover',
                  objectPosition: 'center',
                  width: '100%',
                }"
              />
            </Column>
          </Row>
        </Section>
        <Section :style="{ marginBottom: '24px' }">
          <Row
            :style="{
              borderCollapse: 'separate',
              borderSpacing: '12px',
              tableLayout: 'fixed',
              width: '100%',
            }"
          >
            <Column
              v-for="product in products"
              :key="product.title"
              :style="{
                marginLeft: 'auto',
                marginRight: 'auto',
                maxWidth: '180px',
              }"
            >
              <Img
                :src="product.imageUrl"
                :alt="product.altText"
                :style="{
                  borderRadius: '4px',
                  marginBottom: '18px',
                  width: '100%',
                }"
              />
              <div>
                <Heading
                  as="h2"
                  :style="{
                    fontSize: '14px',
                    lineHeight: '20px',
                    fontWeight: '700',
                    marginBottom: '8px',
                  }"
                >
                  {{ product.title }}
                </Heading>
                <Text
                  :style="{
                    color: 'rgb(107,114,128)',
                    fontSize: '12px',
                    lineHeight: '20px',
                    margin: '0px',
                    paddingRight: '12px',
                  }"
                >
                  {{ product.description }}
                </Text>
              </div>
            </Column>
          </Row>
        </Section>
      </Container>
    </Body>
  </Html>
</template>
```
