# Gallery

> Gallery components for displaying images in grids and columns.

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

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

## Four images in a grid

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/four-images-in-a-grid

### Tailwind

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

<template>
  <Section class="my-[16px]">
    <Section class="mt-[42px]">
      <Row>
        <Text
          class="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]"
        >
          Our products
        </Text>
        <Text
          class="m-0 mt-[8px] font-semibold text-[24px] text-gray-900 leading-[32px]"
        >
          Elegant Style
        </Text>
        <Text class="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
          We spent two years in development to bring you the next generation of
          our award-winning home brew grinder. From the finest pour-overs to the
          coarsest cold brews, your coffee will never be the same again.
        </Text>
      </Row>
    </Section>
    <Section class="mt-[16px]">
      <Row class="mt-[16px]">
        <Column class="w-[50%] pr-[8px]">
          <Link href="#">
            <Img
              alt="Stagg Electric Kettle"
              class="w-full rounded-[12px] object-cover"
              :height="288"
              src="/static/stagg-eletric-kettle.jpg"
            />
          </Link>
        </Column>
        <Column class="w-[50%] pl-[8px]">
          <Link href="#">
            <Img
              alt="Ode Grinder"
              class="w-full rounded-[12px] object-cover"
              :height="288"
              src="/static/ode-grinder.jpg"
            />
          </Link>
        </Column>
      </Row>
      <Row class="mt-[16px]">
        <Column class="w-[50%] pr-[8px]">
          <Link href="#">
            <Img
              alt="Atmos Vacuum Canister"
              class="w-full rounded-[12px] object-cover"
              :height="288"
              src="/static/atmos-vacuum-canister.jpg"
            />
          </Link>
        </Column>
        <Column class="w-[50%] pl-[8px]">
          <Link href="#">
            <Img
              alt="Clyde Electric Kettle"
              class="w-full rounded-[12px] object-cover"
              :height="288"
              src="/static/clyde-electric-kettle.jpg"
            />
          </Link>
        </Column>
      </Row>
    </Section>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section :style="{ marginTop: '16px', marginBottom: '16px' }">
    <Section :style="{ marginTop: '42px' }">
      <Row>
        <Text
          :style="{
            margin: '0px',
            fontSize: '16px',
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(79,70,229)',
          }"
        >
          Our products
        </Text>
        <Text
          :style="{
            margin: '0px',
            marginTop: '8px',
            fontSize: '24px',
            lineHeight: '32px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Elegant Style
        </Text>
        <Text
          :style="{
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          We spent two years in development to bring you the next generation of
          our award-winning home brew grinder. From the finest pour-overs to the
          coarsest cold brews, your coffee will never be the same again.
        </Text>
      </Row>
    </Section>
    <Section :style="{ marginTop: '16px' }">
      <Row :style="{ marginTop: '16px' }">
        <Column :style="{ width: '50%', paddingRight: '8px' }">
          <Link href="#">
            <Img
              alt="Stagg Electric Kettle"
              :height="288"
              src="/static/stagg-eletric-kettle.jpg"
              :style="{
                width: '100%',
                borderRadius: '12px',
                objectFit: 'cover',
              }"
            />
          </Link>
        </Column>
        <Column :style="{ width: '50%', paddingLeft: '8px' }">
          <Link href="#">
            <Img
              alt="Ode Grinder"
              :height="288"
              src="/static/ode-grinder.jpg"
              :style="{
                width: '100%',
                borderRadius: '12px',
                objectFit: 'cover',
              }"
            />
          </Link>
        </Column>
      </Row>
      <Row :style="{ marginTop: '16px' }">
        <Column :style="{ width: '50%', paddingRight: '8px' }">
          <Link href="#">
            <Img
              alt="Atmos Vacuum Canister"
              :height="288"
              src="/static/atmos-vacuum-canister.jpg"
              :style="{
                width: '100%',
                borderRadius: '12px',
                objectFit: 'cover',
              }"
            />
          </Link>
        </Column>
        <Column :style="{ width: '50%', paddingLeft: '8px' }">
          <Link href="#">
            <Img
              alt="Clyde Electric Kettle"
              :height="288"
              src="/static/clyde-electric-kettle.jpg"
              :style="{
                width: '100%',
                borderRadius: '12px',
                objectFit: 'cover',
              }"
            />
          </Link>
        </Column>
      </Row>
    </Section>
  </Section>
</template>
```

## Three columns with images

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

### Tailwind

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

<template>
  <Section class="my-[16px]">
    <Section>
      <Row>
        <Text
          class="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]"
        >
          Our products
        </Text>
        <Text
          class="m-0 mt-[8px] font-semibold text-[24px] text-gray-900 leading-[32px]"
        >
          Elegant Style
        </Text>
        <Text class="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
          We spent two years in development to bring you the next generation of
          our award-winning home brew grinder. From the finest pour-overs to the
          coarsest cold brews, your coffee will never be the same again.
        </Text>
      </Row>
    </Section>
    <Section>
      <Row>
        <Column class="w-1/3 pr-[8px]">
          <Link href="#">
            <Img
              alt="Stagg Electric Kettle"
              class="w-full rounded-[12px] object-cover"
              :height="186"
              src="/static/stagg-eletric-kettle.jpg"
            />
          </Link>
        </Column>
        <Column class="w-1/3 px-[8px]">
          <Link href="#">
            <Img
              alt="Ode Grinder"
              class="w-full rounded-[12px] object-cover"
              :height="186"
              src="/static/ode-grinder.jpg"
            />
          </Link>
        </Column>
        <Column class="w-1/3 pl-[8px]">
          <Link href="#">
            <Img
              alt="Clyde Electric Kettle"
              class="w-full rounded-[12px] object-cover"
              :height="186"
              src="/static/clyde-electric-kettle.jpg"
            />
          </Link>
        </Column>
      </Row>
    </Section>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section :style="{ marginTop: '16px', marginBottom: '16px' }">
    <Section>
      <Row>
        <Text
          :style="{
            margin: '0px',
            fontSize: '16px',
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(79,70,229)',
          }"
        >
          Our products
        </Text>
        <Text
          :style="{
            margin: '0px',
            marginTop: '8px',
            fontSize: '24px',
            lineHeight: '32px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Elegant Style
        </Text>
        <Text
          :style="{
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          We spent two years in development to bring you the next generation of
          our award-winning home brew grinder. From the finest pour-overs to the
          coarsest cold brews, your coffee will never be the same again.
        </Text>
      </Row>
    </Section>
    <Section>
      <Row>
        <Column :style="{ width: '33.333333%', paddingRight: '8px' }">
          <Link href="#">
            <Img
              alt="Stagg Electric Kettle"
              :height="186"
              src="/static/stagg-eletric-kettle.jpg"
              :style="{
                width: '100%',
                borderRadius: '12px',
                objectFit: 'cover',
              }"
            />
          </Link>
        </Column>
        <Column
          :style="{
            width: '33.333333%',
            paddingLeft: '8px',
            paddingRight: '8px',
          }"
        >
          <Link href="#">
            <Img
              alt="Ode Grinder"
              :height="186"
              src="/static/ode-grinder.jpg"
              :style="{
                width: '100%',
                borderRadius: '12px',
                objectFit: 'cover',
              }"
            />
          </Link>
        </Column>
        <Column :style="{ width: '33.333333%', paddingLeft: '8px' }">
          <Link href="#">
            <Img
              alt="Clyde Electric Kettle"
              :height="186"
              src="/static/clyde-electric-kettle.jpg"
              :style="{
                width: '100%',
                borderRadius: '12px',
                objectFit: 'cover',
              }"
            />
          </Link>
        </Column>
      </Row>
    </Section>
  </Section>
</template>
```

## Images on horizontal grid

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

### Tailwind

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

<template>
  <Section class="my-[16px]">
    <Section>
      <Row>
        <Text
          class="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]"
        >
          Collections
        </Text>
        <Text
          class="m-0 mt-[8px] font-semibold text-[24px] text-gray-900 leading-[32px]"
        >
          Bundle & Save
        </Text>
        <Text class="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
          Award-winning grinders and burrs for brewing like a barista at home.
        </Text>
      </Row>
    </Section>
    <Section class="mt-[16px]">
      <Row class="mt-[16px]">
        <Column class="w-1/2 pr-[8px]">
          <Row class="pb-[8px]">
            <td>
              <Link href="#">
                <Img
                  alt="Grinder Collection"
                  class="w-full rounded-[12px] object-cover"
                  :height="152"
                  src="/static/grinder-collection.jpg"
                />
              </Link>
            </td>
          </Row>
          <Row class="pt-[8px]">
            <td>
              <Link href="#">
                <Img
                  alt="Bundle Collection"
                  class="w-full rounded-[12px] object-cover"
                  :height="152"
                  src="/static/bundle-collection.jpg"
                />
              </Link>
            </td>
          </Row>
        </Column>
        <Column class="w-1/2 py-[8px] pl-[8px]">
          <Link href="#">
            <Img
              alt="Clara French Press"
              class="w-full rounded-[12px] object-cover"
              :height="152 + 152 + 8 + 8"
              src="/static/clara-french-press.jpg"
            />
          </Link>
        </Column>
      </Row>
    </Section>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section :style="{ marginTop: '16px', marginBottom: '16px' }">
    <Section>
      <Row>
        <Text
          :style="{
            margin: '0px',
            fontSize: '16px',
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(79,70,229)',
          }"
        >
          Collections
        </Text>
        <Text
          :style="{
            margin: '0px',
            marginTop: '8px',
            fontSize: '24px',
            lineHeight: '32px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Bundle & Save
        </Text>
        <Text
          :style="{
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Award-winning grinders and burrs for brewing like a barista at home.
        </Text>
      </Row>
    </Section>
    <Section :style="{ marginTop: '16px' }">
      <Row :style="{ marginTop: '16px' }">
        <Column :style="{ width: '50%', paddingRight: '8px' }">
          <Row :style="{ paddingBottom: '8px' }">
            <td>
              <Link href="#">
                <Img
                  alt="Grinder Collection"
                  :height="152"
                  src="/static/grinder-collection.jpg"
                  :style="{
                    width: '100%',
                    borderRadius: '12px',
                    objectFit: 'cover',
                  }"
                />
              </Link>
            </td>
          </Row>
          <Row :style="{ paddingTop: '8px' }">
            <td>
              <Link href="#">
                <Img
                  alt="Bundle Collection"
                  :height="152"
                  src="/static/bundle-collection.jpg"
                  :style="{
                    width: '100%',
                    borderRadius: '12px',
                    objectFit: 'cover',
                  }"
                />
              </Link>
            </td>
          </Row>
        </Column>
        <Column
          :style="{
            width: '50%',
            paddingLeft: '8px',
            paddingTop: '8px',
            paddingBottom: '8px',
          }"
        >
          <Link href="#">
            <Img
              alt="Clara French Press"
              :height="152 + 152 + 8 + 8"
              src="/static/clara-french-press.jpg"
              :style="{
                width: '100%',
                borderRadius: '12px',
                objectFit: 'cover',
              }"
            />
          </Link>
        </Column>
      </Row>
    </Section>
  </Section>
</template>
```

## Images on vertical grid

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

### Tailwind

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

<template>
  <Section class="my-[16px]">
    <Section>
      <Row>
        <Text
          class="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]"
        >
          Drinkware
        </Text>
        <Text
          class="m-0 mt-[8px] font-semibold text-[24px] text-gray-900 leading-[32px]"
        >
          Ceramic Mugs
        </Text>
        <Text class="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
          Picasso your pour with a sleek ceramic cup designed for beautiful
          espresso drinks. Engineered for the outdoors and designed to enhance
          the taste of your libation of choice.
        </Text>
      </Row>
    </Section>
    <Section class="mt-[16px]">
      <Link href="#">
        <Img
          alt="Mugs Collection"
          class="rounded-[12px] object-cover"
          :height="288"
          src="/static/mugs-collection.jpg"
          width="100%"
        />
      </Link>
      <Row class="mt-[16px]">
        <Column class="w-1/2 pr-[8px]">
          <Link href="#">
            <Img
              alt="Monty Art Cup - 1"
              class="rounded-[12px] object-cover"
              :height="288"
              src="/static/monty-art-cup-1.jpg"
              width="100%"
            />
          </Link>
        </Column>
        <Column class="w-1/2 pl-[8px]">
          <Link href="#">
            <Img
              alt="Monty Art Cup - 2"
              class="rounded-[12px] object-cover"
              :height="288"
              src="/static/monty-art-cup-2.jpg"
              width="100%"
            />
          </Link>
        </Column>
      </Row>
    </Section>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section :style="{ marginTop: '16px', marginBottom: '16px' }">
    <Section>
      <Row>
        <Text
          :style="{
            margin: '0px',
            fontSize: '16px',
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(79,70,229)',
          }"
        >
          Drinkware
        </Text>
        <Text
          :style="{
            margin: '0px',
            marginTop: '8px',
            fontSize: '24px',
            lineHeight: '32px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Ceramic Mugs
        </Text>
        <Text
          :style="{
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Picasso your pour with a sleek ceramic cup designed for beautiful
          espresso drinks. Engineered for the outdoors and designed to enhance
          the taste of your libation of choice.
        </Text>
      </Row>
    </Section>
    <Section :style="{ marginTop: '16px' }">
      <Link href="#">
        <Img
          alt="Mugs Collection"
          :height="288"
          src="/static/mugs-collection.jpg"
          :style="{ borderRadius: '12px', objectFit: 'cover' }"
          width="100%"
        />
      </Link>
      <Row :style="{ marginTop: '16px' }">
        <Column :style="{ width: '50%', paddingRight: '8px' }">
          <Link href="#">
            <Img
              alt="Monty Art Cup - 1"
              :height="288"
              src="/static/monty-art-cup-1.jpg"
              :style="{ borderRadius: '12px', objectFit: 'cover' }"
              width="100%"
            />
          </Link>
        </Column>
        <Column :style="{ width: '50%', paddingLeft: '8px' }">
          <Link href="#">
            <Img
              alt="Monty Art Cup - 2"
              :height="288"
              src="/static/monty-art-cup-2.jpg"
              :style="{ borderRadius: '12px', objectFit: 'cover' }"
              width="100%"
            />
          </Link>
        </Column>
      </Row>
    </Section>
  </Section>
</template>
```