# Gallery

> Gallery components for displaying images in grids and columns.

Web: https://react.email/components/gallery

Paste any snippet into an email built with React Email. The snippets use the primitives from `@react-email/components`.

## Four images in a grid

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/four-images-in-a-grid

### Tailwind

```tsx
<Section className="my-[16px]">
  <Section className="mt-[42px]">
    <Row>
      <Text className="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]">
        Our products
      </Text>
      <Text className="m-0 mt-[8px] font-semibold text-[24px] text-gray-900 leading-[32px]">
        Elegant Style
      </Text>
      <Text className="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 className="mt-[16px]">
    <Row className="mt-[16px]">
      <Column className="w-[50%] pr-[8px]">
        <Link href="#">
          <Img
            alt="Stagg Electric Kettle"
            className="w-full rounded-[12px] object-cover"
            height={288}
            src="/static/stagg-eletric-kettle.jpg"
          />
        </Link>
      </Column>
      <Column className="w-[50%] pl-[8px]">
        <Link href="#">
          <Img
            alt="Ode Grinder"
            className="w-full rounded-[12px] object-cover"
            height={288}
            src="/static/ode-grinder.jpg"
          />
        </Link>
      </Column>
    </Row>
    <Row className="mt-[16px]">
      <Column className="w-[50%] pr-[8px]">
        <Link href="#">
          <Img
            alt="Atmos Vacuum Canister"
            className="w-full rounded-[12px] object-cover"
            height={288}
            src="/static/atmos-vacuum-canister.jpg"
          />
        </Link>
      </Column>
      <Column className="w-[50%] pl-[8px]">
        <Link href="#">
          <Img
            alt="Clyde Electric Kettle"
            className="w-full rounded-[12px] object-cover"
            height={288}
            src="/static/clyde-electric-kettle.jpg"
          />
        </Link>
      </Column>
    </Row>
  </Section>
</Section>
```

### Inline styles

```tsx
<Section style={{ marginTop: 16, marginBottom: 16 }}>
  <Section style={{ marginTop: 42 }}>
    <Row>
      <Text
        style={{
          margin: '0px',
          fontSize: 16,
          lineHeight: '24px',
          fontWeight: 600,
          color: 'rgb(79,70,229)',
        }}
      >
        Our products
      </Text>
      <Text
        style={{
          margin: '0px',
          marginTop: 8,
          fontSize: 24,
          lineHeight: '32px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Elegant Style
      </Text>
      <Text
        style={{
          marginTop: 8,
          fontSize: 16,
          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: 16 }}>
    <Row style={{ marginTop: 16 }}>
      <Column style={{ width: '50%', paddingRight: 8 }}>
        <Link href="#">
          <Img
            alt="Stagg Electric Kettle"
            height={288}
            src="/static/stagg-eletric-kettle.jpg"
            style={{
              width: '100%',
              borderRadius: 12,
              objectFit: 'cover',
            }}
          />
        </Link>
      </Column>
      <Column style={{ width: '50%', paddingLeft: 8 }}>
        <Link href="#">
          <Img
            alt="Ode Grinder"
            height={288}
            src="/static/ode-grinder.jpg"
            style={{
              width: '100%',
              borderRadius: 12,
              objectFit: 'cover',
            }}
          />
        </Link>
      </Column>
    </Row>
    <Row style={{ marginTop: 16 }}>
      <Column style={{ width: '50%', paddingRight: 8 }}>
        <Link href="#">
          <Img
            alt="Atmos Vacuum Canister"
            height={288}
            src="/static/atmos-vacuum-canister.jpg"
            style={{
              width: '100%',
              borderRadius: 12,
              objectFit: 'cover',
            }}
          />
        </Link>
      </Column>
      <Column style={{ width: '50%', paddingLeft: 8 }}>
        <Link href="#">
          <Img
            alt="Clyde Electric Kettle"
            height={288}
            src="/static/clyde-electric-kettle.jpg"
            style={{
              width: '100%',
              borderRadius: 12,
              objectFit: 'cover',
            }}
          />
        </Link>
      </Column>
    </Row>
  </Section>
</Section>
```

## Three columns with images

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/three-columns-with-images

### Tailwind

```tsx
<Section className="my-[16px]">
  <Section>
    <Row>
      <Text className="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]">
        Our products
      </Text>
      <Text className="m-0 mt-[8px] font-semibold text-[24px] text-gray-900 leading-[32px]">
        Elegant Style
      </Text>
      <Text className="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 className="w-1/3 pr-[8px]">
        <Link href="#">
          <Img
            alt="Stagg Electric Kettle"
            className="w-full rounded-[12px] object-cover"
            height={186}
            src="/static/stagg-eletric-kettle.jpg"
          />
        </Link>
      </Column>
      <Column className="w-1/3 px-[8px]">
        <Link href="#">
          <Img
            alt="Ode Grinder"
            className="w-full rounded-[12px] object-cover"
            height={186}
            src="/static/ode-grinder.jpg"
          />
        </Link>
      </Column>
      <Column className="w-1/3 pl-[8px]">
        <Link href="#">
          <Img
            alt="Clyde Electric Kettle"
            className="w-full rounded-[12px] object-cover"
            height={186}
            src="/static/clyde-electric-kettle.jpg"
          />
        </Link>
      </Column>
    </Row>
  </Section>
</Section>
```

### Inline styles

```tsx
<Section style={{ marginTop: 16, marginBottom: 16 }}>
  <Section>
    <Row>
      <Text
        style={{
          margin: '0px',
          fontSize: 16,
          lineHeight: '24px',
          fontWeight: 600,
          color: 'rgb(79,70,229)',
        }}
      >
        Our products
      </Text>
      <Text
        style={{
          margin: '0px',
          marginTop: 8,
          fontSize: 24,
          lineHeight: '32px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Elegant Style
      </Text>
      <Text
        style={{
          marginTop: 8,
          fontSize: 16,
          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: 8 }}>
        <Link href="#">
          <Img
            alt="Stagg Electric Kettle"
            height={186}
            src="/static/stagg-eletric-kettle.jpg"
            style={{
              width: '100%',
              borderRadius: 12,
              objectFit: 'cover',
            }}
          />
        </Link>
      </Column>
      <Column
        style={{ width: '33.333333%', paddingLeft: 8, paddingRight: 8 }}
      >
        <Link href="#">
          <Img
            alt="Ode Grinder"
            height={186}
            src="/static/ode-grinder.jpg"
            style={{
              width: '100%',
              borderRadius: 12,
              objectFit: 'cover',
            }}
          />
        </Link>
      </Column>
      <Column style={{ width: '33.333333%', paddingLeft: 8 }}>
        <Link href="#">
          <Img
            alt="Clyde Electric Kettle"
            height={186}
            src="/static/clyde-electric-kettle.jpg"
            style={{
              width: '100%',
              borderRadius: 12,
              objectFit: 'cover',
            }}
          />
        </Link>
      </Column>
    </Row>
  </Section>
</Section>
```

## Images on horizontal grid

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/images-on-horizontal-grid

### Tailwind

```tsx
<Section className="my-[16px]">
  <Section>
    <Row>
      <Text className="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]">
        Collections
      </Text>
      <Text className="m-0 mt-[8px] font-semibold text-[24px] text-gray-900 leading-[32px]">
        Bundle & Save
      </Text>
      <Text className="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 className="mt-[16px]">
    <Row className="mt-[16px]">
      <Column className="w-1/2 pr-[8px]">
        <Row className="pb-[8px]">
          <td>
            <Link href="#">
              <Img
                alt="Grinder Collection"
                className="w-full rounded-[12px] object-cover"
                height={152}
                src="/static/grinder-collection.jpg"
              />
            </Link>
          </td>
        </Row>
        <Row className="pt-[8px]">
          <td>
            <Link href="#">
              <Img
                alt="Bundle Collection"
                className="w-full rounded-[12px] object-cover"
                height={152}
                src="/static/bundle-collection.jpg"
              />
            </Link>
          </td>
        </Row>
      </Column>
      <Column className="w-1/2 py-[8px] pl-[8px]">
        <Link href="#">
          <Img
            alt="Clara French Press"
            className="w-full rounded-[12px] object-cover"
            height={152 + 152 + 8 + 8}
            src="/static/clara-french-press.jpg"
          />
        </Link>
      </Column>
    </Row>
  </Section>
</Section>
```

### Inline styles

```tsx
<Section style={{ marginTop: 16, marginBottom: 16 }}>
  <Section>
    <Row>
      <Text
        style={{
          margin: '0px',
          fontSize: 16,
          lineHeight: '24px',
          fontWeight: 600,
          color: 'rgb(79,70,229)',
        }}
      >
        Collections
      </Text>
      <Text
        style={{
          margin: '0px',
          marginTop: 8,
          fontSize: 24,
          lineHeight: '32px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Bundle & Save
      </Text>
      <Text
        style={{
          marginTop: 8,
          fontSize: 16,
          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: 16 }}>
    <Row style={{ marginTop: 16 }}>
      <Column style={{ width: '50%', paddingRight: 8 }}>
        <Row style={{ paddingBottom: 8 }}>
          <td>
            <Link href="#">
              <Img
                alt="Grinder Collection"
                height={152}
                src="/static/grinder-collection.jpg"
                style={{
                  width: '100%',
                  borderRadius: 12,
                  objectFit: 'cover',
                }}
              />
            </Link>
          </td>
        </Row>
        <Row style={{ paddingTop: 8 }}>
          <td>
            <Link href="#">
              <Img
                alt="Bundle Collection"
                height={152}
                src="/static/bundle-collection.jpg"
                style={{
                  width: '100%',
                  borderRadius: 12,
                  objectFit: 'cover',
                }}
              />
            </Link>
          </td>
        </Row>
      </Column>
      <Column
        style={{
          width: '50%',
          paddingLeft: 8,
          paddingTop: 8,
          paddingBottom: 8,
        }}
      >
        <Link href="#">
          <Img
            alt="Clara French Press"
            height={152 + 152 + 8 + 8}
            src="/static/clara-french-press.jpg"
            style={{
              width: '100%',
              borderRadius: 12,
              objectFit: 'cover',
            }}
          />
        </Link>
      </Column>
    </Row>
  </Section>
</Section>
```

## Images on vertical grid

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/images-on-vertical-grid

### Tailwind

```tsx
<Section className="my-[16px]">
  <Section>
    <Row>
      <Text className="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]">
        Drinkware
      </Text>
      <Text className="m-0 mt-[8px] font-semibold text-[24px] text-gray-900 leading-[32px]">
        Ceramic Mugs
      </Text>
      <Text className="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 className="mt-[16px]">
    <Link href="#">
      <Img
        alt="Mugs Collection"
        className="rounded-[12px] object-cover"
        height={288}
        src="/static/mugs-collection.jpg"
        width="100%"
      />
    </Link>
    <Row className="mt-[16px]">
      <Column className="w-1/2 pr-[8px]">
        <Link href="#">
          <Img
            alt="Monty Art Cup - 1"
            className="rounded-[12px] object-cover"
            height={288}
            src="/static/monty-art-cup-1.jpg"
            width="100%"
          />
        </Link>
      </Column>
      <Column className="w-1/2 pl-[8px]">
        <Link href="#">
          <Img
            alt="Monty Art Cup - 2"
            className="rounded-[12px] object-cover"
            height={288}
            src="/static/monty-art-cup-2.jpg"
            width="100%"
          />
        </Link>
      </Column>
    </Row>
  </Section>
</Section>
```

### Inline styles

```tsx
<Section style={{ marginTop: 16, marginBottom: 16 }}>
  <Section>
    <Row>
      <Text
        style={{
          margin: '0px',
          fontSize: 16,
          lineHeight: '24px',
          fontWeight: 600,
          color: 'rgb(79,70,229)',
        }}
      >
        Drinkware
      </Text>
      <Text
        style={{
          margin: '0px',
          marginTop: 8,
          fontSize: 24,
          lineHeight: '32px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Ceramic Mugs
      </Text>
      <Text
        style={{
          marginTop: 8,
          fontSize: 16,
          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: 16 }}>
    <Link href="#">
      <Img
        alt="Mugs Collection"
        height={288}
        src="/static/mugs-collection.jpg"
        style={{ borderRadius: 12, objectFit: 'cover' }}
        width="100%"
      />
    </Link>
    <Row style={{ marginTop: 16 }}>
      <Column style={{ width: '50%', paddingRight: 8 }}>
        <Link href="#">
          <Img
            alt="Monty Art Cup - 1"
            height={288}
            src="/static/monty-art-cup-1.jpg"
            style={{ borderRadius: 12, objectFit: 'cover' }}
            width="100%"
          />
        </Link>
      </Column>
      <Column style={{ width: '50%', paddingLeft: 8 }}>
        <Link href="#">
          <Img
            alt="Monty Art Cup - 2"
            height={288}
            src="/static/monty-art-cup-2.jpg"
            style={{
              borderRadius: 12,
              objectFit: 'cover',
            }}
            width="100%"
          />
        </Link>
      </Column>
    </Row>
  </Section>
</Section>
```