# List

> List components for displaying ordered and unordered lists with different styles.

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

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

## Simple List

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/simple-list

### Tailwind

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

const features = [
  {
    number: 1,
    title: 'Innovative Solutions',
    description:
      'We deliver innovative solutions that drive success and growth.',
  },
  {
    number: 2,
    title: 'Exceptional Performance',
    description:
      'Our services deliver high-quality performance and efficiency.',
  },
  {
    number: 3,
    title: 'Reliable Support',
    description:
      'We have robust support to keep your operations running smoothly.',
  },
  {
    number: 4,
    title: 'Advanced Security',
    description:
      'We implement cutting-edge security measures to protect your data and assets.',
  },
  {
    number: 5,
    title: 'Scalable Growth',
    description:
      'We develop customized strategies for sustainable and scalable growth.',
  },
];
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Preview>Top 5 Features of Our Service</Preview>
      <Container class="mx-auto max-w-[600px] rounded-[8px] bg-white p-[24px]">
        <Heading class="mb-[42px] text-center text-[24px] leading-[32px]">
          Top 5 Features of Our Service
        </Heading>
        <Section
          v-for="feature in features"
          :key="feature.title"
          class="mb-[36px]"
        >
          <Row class="pr-[32px] pl-[12px]">
            <Column
              width="24"
              height="24"
              align="center"
              valign="top"
              class="pr-[18px] h-[24px] w-[24px]"
            >
              <Row>
                <Column
                  align="center"
                  valign="middle"
                  width="24"
                  height="24"
                  class="h-[24px] w-[24px] rounded-full bg-indigo-600 font-semibold text-white text-[12px] leading-none"
                >
                  {{ feature.number }}
                </Column>
              </Row>
            </Column>
            <Column valign="top">
              <Heading
                as="h2"
                class="mt-[0px] mb-[8px] text-gray-900 text-[18px] leading-[28px]"
              >
                {{ feature.title }}
              </Heading>
              <Text class="m-0 text-gray-500 text-[14px] leading-[24px]">
                {{ feature.description }}
              </Text>
            </Column>
          </Row>
        </Section>
      </Container>
    </Body>
  </Html>
</template>
```

### Inline styles

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

const features = [
  {
    number: 1,
    title: 'Innovative Solutions',
    description:
      'We deliver innovative solutions that drive success and growth.',
  },
  {
    number: 2,
    title: 'Exceptional Performance',
    description:
      'Our services deliver high-quality performance and efficiency.',
  },
  {
    number: 3,
    title: 'Reliable Support',
    description:
      'We have robust support to keep your operations running smoothly.',
  },
  {
    number: 4,
    title: 'Advanced Security',
    description:
      'We implement cutting-edge security measures to protect your data and assets.',
  },
  {
    number: 5,
    title: 'Scalable Growth',
    description:
      'We develop customized strategies for sustainable and scalable growth.',
  },
];
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Preview>Top 5 Features of Our Service</Preview>
      <Container
        :style="{
          backgroundColor: 'rgb(255,255,255)',
          borderRadius: '8px',
          marginLeft: 'auto',
          marginRight: 'auto',
          maxWidth: '600px',
          padding: '24px',
        }"
      >
        <Heading
          :style="{
            fontSize: '24px',
            lineHeight: '32px',
            marginBottom: '42px',
            textAlign: 'center',
          }"
        >
          Top 5 Features of Our Service
        </Heading>
        <Section
          v-for="feature in features"
          :key="feature.title"
          :style="{ marginBottom: '36px' }"
        >
          <Row :style="{ paddingLeft: '12px', paddingRight: '32px' }">
            <Column
              width="24"
              height="24"
              valign="top"
              align="center"
              :style="{ width: '24px', height: '24px', paddingRight: '18px' }"
            >
              <Row>
                <Column
                  width="24"
                  height="24"
                  align="center"
                  valign="middle"
                  :style="{
                    width: '24px',
                    height: '24px',
                    backgroundColor: 'rgb(79,70,229)',
                    borderRadius: '9999px',
                    color: 'rgb(255,255,255)',
                    fontSize: '12px',
                    fontWeight: '600',
                    lineHeight: '1',
                  }"
                >
                  {{ feature.number }}
                </Column>
              </Row>
            </Column>
            <Column>
              <Heading
                as="h2"
                :style="{
                  color: 'rgb(17,24,39)',
                  fontSize: '18px',
                  lineHeight: '28px',
                  marginBottom: '8px',
                  marginTop: '0px',
                }"
              >
                {{ feature.title }}
              </Heading>
              <Text
                :style="{
                  color: 'rgb(107,114,128)',
                  fontSize: '14px',
                  lineHeight: '24px',
                  margin: '0px',
                }"
              >
                {{ feature.description }}
              </Text>
            </Column>
          </Row>
        </Section>
      </Container>
    </Body>
  </Html>
</template>
```

## List with image on left

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/list-with-image-on-left

### Tailwind

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

const steps = [
  {
    number: 1,
    imageUrl: '/static/stagg-eletric-kettle.jpg',
    title: 'Start Your Search',
    description:
      'Search for the products you need or upload your list of requirements.',
    learnMoreLink: '#',
  },
  {
    number: 2,
    imageUrl: '/static/atmos-vacuum-canister.jpg',
    title: 'Compare & Save',
    description:
      'Compare prices and offers from different suppliers to find the best deals.',
    learnMoreLink: '#',
  },
  {
    number: 3,
    imageUrl: '/static/bundle-collection.jpg',
    title: 'Build Your Cart',
    description:
      'Select your desired items and add them to your shopping cart.',
    learnMoreLink: '#',
  },
  {
    number: 4,
    imageUrl: '/static/clara-french-press.jpg',
    title: 'Enjoy The Benefits',
    description:
      'Receive your products and enjoy the savings and convenience of our service.',
    learnMoreLink: '#',
  },
];
</script>

<template>
  <Html>
    <Head />
    <Body class="bg-white">
      <Preview>How Our Service Works: 5 Simple Steps</Preview>
      <Container
        class="mx-auto max-w-[600px] rounded-[8px] bg-white px-[24px] pt-[24px] pb-0"
      >
        <Heading
          as="h1"
          class="mb-[42px] text-center text-[24px] leading-[32px]"
        >
          How Our Service Works: 5 Simple Steps
        </Heading>
        <Section v-for="step in steps" :key="step.title" class="mb-[30px]">
          <Row class="mb-[24px]">
            <Column width="40%" class="w-2/5 pr-[24px]">
              <Img
                :src="step.imageUrl"
                width="100%"
                height="168"
                :alt="`Step image - ${step.number}`"
                class="block w-full rounded-[4px] object-cover object-center"
              />
            </Column>
            <Column width="60%" class="w-3/5 pr-[24px]">
              <Row
                width="24"
                class="w-[24px] h-[24px] mb-[18px]"
                :align="undefined"
              >
                <Column
                  width="24"
                  height="24"
                  class="rounded-full h-[24px] w-[24px] bg-indigo-600 font-semibold text-white text-[12px] leading-none"
                  align="center"
                  valign="middle"
                >
                  {{ step.number }}
                </Column>
              </Row>
              <Heading
                as="h2"
                class="mt-0 mb-[8px] font-bold text-[20px] leading-none"
              >
                {{ step.title }}
              </Heading>
              <Text class="m-0 text-gray-500 text-[14px] leading-[24px]">
                {{ step.description }}
              </Text>
              <Link
                :href="step.learnMoreLink"
                class="mt-[12px] block font-semibold text-indigo-600 text-[14px] no-underline"
              >Learn more →</Link>
            </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 steps = [
  {
    number: 1,
    imageUrl: '/static/stagg-eletric-kettle.jpg',
    title: 'Start Your Search',
    description:
      'Search for the products you need or upload your list of requirements.',
    learnMoreLink: '#',
  },
  {
    number: 2,
    imageUrl: '/static/atmos-vacuum-canister.jpg',
    title: 'Compare & Save',
    description:
      'Compare prices and offers from different suppliers to find the best deals.',
    learnMoreLink: '#',
  },
  {
    number: 3,
    imageUrl: '/static/bundle-collection.jpg',
    title: 'Build Your Cart',
    description:
      'Select your desired items and add them to your shopping cart.',
    learnMoreLink: '#',
  },
  {
    number: 4,
    imageUrl: '/static/clara-french-press.jpg',
    title: 'Enjoy The Benefits',
    description:
      'Receive your products and enjoy the savings and convenience of our service.',
    learnMoreLink: '#',
  },
];
</script>

<template>
  <Html>
    <Head />
    <Body :style="{ backgroundColor: 'rgb(255,255,255)' }">
      <Preview>How Our Service Works: 5 Simple Steps</Preview>
      <Container
        :style="{
          backgroundColor: 'rgb(255,255,255)',
          borderRadius: '8px',
          marginLeft: 'auto',
          marginRight: 'auto',
          maxWidth: '600px',
          paddingLeft: '24px',
          paddingRight: '24px',
          paddingTop: '24px',
          paddingBottom: '0px',
        }"
      >
        <Heading
          as="h1"
          :style="{
            fontSize: '24px',
            lineHeight: '32px',
            marginBottom: '42px',
            textAlign: 'center',
          }"
        >
          How Our Service Works: 5 Simple Steps
        </Heading>
        <Section
          v-for="step in steps"
          :key="step.title"
          :style="{ marginBottom: '30px' }"
        >
          <Row :style="{ marginBottom: '24px' }">
            <Column width="40%" :style="{ width: '40%', paddingRight: '24px' }">
              <Img
                :src="step.imageUrl"
                width="100%"
                height="168"
                :alt="`Step image - ${step.number}`"
                :style="{
                  borderRadius: '4px',
                  display: 'block',
                  objectFit: 'cover',
                  objectPosition: 'center',
                  width: '100%',
                }"
              />
            </Column>
            <Column width="60%" :style="{ width: '60%', paddingRight: '24px' }">
              <Row
                width="24"
                :style="{ width: '24px', height: '24px', marginBottom: '18px' }"
                :align="undefined"
              >
                <Column
                  width="24"
                  height="24"
                  :style="{
                    borderRadius: '9999px',
                    height: '24px',
                    width: '24px',
                    backgroundColor: 'rgb(79,70,229)',
                    color: 'rgb(255,255,255)',
                    fontWeight: 600,
                    fontSize: '12px',
                    lineHeight: 1,
                  }"
                  align="center"
                  valign="middle"
                >
                  {{ step.number }}
                </Column>
              </Row>
              <Heading
                as="h2"
                :style="{
                  fontSize: '20px',
                  fontWeight: '700',
                  lineHeight: '1',
                  marginBottom: '8px',
                  marginTop: '0px',
                }"
              >
                {{ step.title }}
              </Heading>
              <Text
                :style="{
                  color: 'rgb(107,114,128)',
                  fontSize: '14px',
                  lineHeight: '24px',
                  margin: '0px',
                }"
              >
                {{ step.description }}
              </Text>
              <Link
                :href="step.learnMoreLink"
                :style="{
                  color: 'rgb(79,70,229)',
                  display: 'block',
                  fontSize: '14px',
                  fontWeight: '600',
                  marginTop: '12px',
                  textDecorationLine: 'none',
                }"
              >Learn more →</Link>
            </Column>
          </Row>
        </Section>
      </Container>
    </Body>
  </Html>
</template>
```
