# Features

> Feature components for showcasing key features with headers, lists, and columns.

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

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

## Header and list items

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

### Tailwind

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

<template>
  <Section class="my-[16px]">
    <Section>
      <Row>
        <Text
          class="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]"
        >
          Functional Style
        </Text>
        <Text class="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
          Combine practicality and style effortlessly with our furniture,
          offering functional designs that enhance your living space.
        </Text>
      </Row>
    </Section>
    <Section>
      <Hr class="!border-gray-300 mx-0 my-[32px] w-full border border-solid" />
      <Section>
        <Row>
          <Column class="align-baseline">
            <Img
              alt="heart icon"
              height="48"
              src="/static/heart-icon.png"
              width="48"
            />
          </Column>
          <Column class="w-[85%]">
            <Text
              class="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]"
            >
              Versatile Comfort
            </Text>
            <Text class="m-0 mt-[8px] text-[16px] text-gray-500 leading-[24px]">
              Experience ultimate comfort and versatility with our furniture
              collection, designed to adapt to your ever-changing needs.
            </Text>
          </Column>
        </Row>
      </Section>
      <Hr class="!border-gray-300 mx-0 my-[32px] w-full border border-solid" />
      <Section>
        <Row>
          <Column class="align-baseline">
            <Img
              alt="rocket icon"
              height="48"
              src="/static/rocket-icon.png"
              width="48"
            />
          </Column>
          <Column class="w-[85%]">
            <Text
              class="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]"
            >
              Luxurious Retreat
            </Text>
            <Text class="m-0 mt-[8px] text-[16px] text-gray-500 leading-[24px]">
              Transform your space into a haven of relaxation with our indulgent
              furniture collection.
            </Text>
          </Column>
        </Row>
      </Section>
      <Hr class="!border-gray-300 mx-0 my-[32px] w-full border border-solid" />
    </Section>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section :style="{ marginTop: '16px', marginBottom: '16px' }">
    <Section>
      <Row>
        <Text
          :style="{
            margin: '0px',
            fontSize: '24px',
            lineHeight: '32px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Functional Style
        </Text>
        <Text
          :style="{
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Combine practicality and style effortlessly with our furniture,
          offering functional designs that enhance your living space.
        </Text>
      </Row>
    </Section>
    <Section>
      <Hr
        :style="{
          marginLeft: '0px',
          marginRight: '0px',
          marginTop: '32px',
          marginBottom: '32px',
          width: '100%',
          borderWidth: '1px',
          borderStyle: 'solid',
          borderColor: 'rgb(209,213,219) !important',
        }"
      />
      <Section>
        <Row>
          <Column :style="{ verticalAlign: 'baseline' }">
            <Img
              alt="heart icon"
              height="48"
              src="/static/heart-icon.png"
              width="48"
            />
          </Column>
          <Column :style="{ width: '85%' }">
            <Text
              :style="{
                margin: '0px',
                fontSize: '20px',
                fontWeight: 600,
                lineHeight: '28px',
                color: 'rgb(17,24,39)',
              }"
            >
              Versatile Comfort
            </Text>
            <Text
              :style="{
                margin: '0px',
                marginTop: '8px',
                fontSize: '16px',
                lineHeight: '24px',
                color: 'rgb(107,114,128)',
              }"
            >
              Experience ultimate comfort and versatility with our furniture
              collection, designed to adapt to your ever-changing needs.
            </Text>
          </Column>
        </Row>
      </Section>
      <Hr
        :style="{
          marginLeft: '0px',
          marginRight: '0px',
          marginTop: '32px',
          marginBottom: '32px',
          width: '100%',
          borderWidth: '1px',
          borderStyle: 'solid',
          borderColor: 'rgb(209,213,219) !important',
        }"
      />
      <Section>
        <Row>
          <Column :style="{ verticalAlign: 'baseline' }">
            <Img
              alt="rocket icon"
              height="48"
              src="/static/rocket-icon.png"
              width="48"
            />
          </Column>
          <Column :style="{ width: '85%' }">
            <Text
              :style="{
                margin: '0px',
                fontSize: '20px',
                fontWeight: 600,
                lineHeight: '28px',
                color: 'rgb(17,24,39)',
              }"
            >
              Luxurious Retreat
            </Text>
            <Text
              :style="{
                margin: '0px',
                marginTop: '8px',
                fontSize: '16px',
                lineHeight: '24px',
                color: 'rgb(107,114,128)',
              }"
            >
              Transform your space into a haven of relaxation with our indulgent
              furniture collection.
            </Text>
          </Column>
        </Row>
      </Section>
      <Hr
        :style="{
          marginLeft: '0px',
          marginRight: '0px',
          marginTop: '32px',
          marginBottom: '32px',
          borderWidth: '1px',
          borderStyle: 'solid',
          borderColor: 'rgb(209,213,219) !important',
        }"
      />
    </Section>
  </Section>
</template>
```

## Header and numbered list items

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/header-and-numbered-list-items

### Tailwind

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

const features = [
  {
    title: 'Versatile Comfort',
    description:
      'Experience ultimate comfort and versatility with our furniture collection, designed to adapt to your ever-changing needs.',
  },
  {
    title: 'Luxurious Retreat',
    description:
      'Transform your space into a haven of relaxation with our indulgent furniture collection.',
  },
  {
    title: 'Unleash Creativity',
    description:
      'Unleash your inner designer with our customizable furniture options, allowing you to create a space that reflects your unique vision',
  },
  {
    title: 'Elevate Outdoor Living',
    description:
      'Take your outdoor space to new heights with our premium outdoor furniture, designed to elevate your alfresco experience.',
  },
];
</script>

<template>
  <Section class="my-[16px]">
    <Section class="pb-[24px]">
      <Row>
        <Text
          class="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]"
        >
          Functional Style
        </Text>
        <Text class="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
          Combine practicality and style effortlessly with our furniture,
          offering functional designs that enhance your living space.
        </Text>
      </Row>
    </Section>
    <template v-for="(feature, index) in features" :key="feature.title">
      <Hr class="!border-gray-300 m-0 w-full border border-solid" />
      <Section class="py-[24px]">
        <Row>
          <Column
            width="48"
            height="40"
            class="w-[40px] h-[40px] pr-[8px]"
            valign="baseline"
          >
            <Row width="40" align="left">
              <Column
                align="center"
                valign="middle"
                width="40"
                height="40"
                class="h-[40px] font-semibold w-[40px] rounded-full bg-indigo-200 text-indigo-600 p-0"
              >
                {{ index + 1 }}
              </Column>
            </Row>
          </Column>
          <Column width="100%" class="w-full">
            <Text
              class="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]"
            >
              {{ feature.title }}
            </Text>
            <Text class="m-0 pt-[8px] text-[16px] text-gray-500 leading-[24px]">
              {{ feature.description }}
            </Text>
          </Column>
        </Row>
      </Section>
    </template>
  </Section>
</template>
```

### Inline styles

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

const features = [
  {
    title: 'Versatile Comfort',
    description:
      'Experience ultimate comfort and versatility with our furniture collection, designed to adapt to your ever-changing needs.',
  },
  {
    title: 'Luxurious Retreat',
    description:
      'Transform your space into a haven of relaxation with our indulgent furniture collection.',
  },
  {
    title: 'Unleash Creativity',
    description:
      'Unleash your inner designer with our customizable furniture options, allowing you to create a space that reflects your unique vision',
  },
  {
    title: 'Elevate Outdoor Living',
    description:
      'Take your outdoor space to new heights with our premium outdoor furniture, designed to elevate your alfresco experience.',
  },
];
</script>

<template>
  <Section :style="{ marginTop: '16px' }">
    <Section :style="{ paddingBottom: '24px' }">
      <Row>
        <Text
          :style="{
            margin: '0',
            fontWeight: 600,
            fontSize: '24px',
            color: 'rgb(17,24,39)',
            lineHeight: '32px',
          }"
        >
          Functional Style
        </Text>
        <Text
          :style="{
            marginTop: '8px',
            fontSize: '16px',
            color: 'rgb(107,114,128)',
            lineHeight: '24px',
          }"
        >
          Combine practicality and style effortlessly with our furniture,
          offering functional designs that enhance your living space.
        </Text>
      </Row>
    </Section>
    <template v-for="(feature, index) in features" :key="feature.title">
      <Hr
        :style="{
          border: '1px solid rgb(209, 213, 219)',
          margin: '0',
          width: '100%',
        }"
      />
      <Section :style="{ paddingTop: '24px', paddingBottom: '24px' }">
        <Row>
          <Column
            width="48"
            height="40"
            :style="{ width: '40px', height: '40px', paddingRight: '8px' }"
            valign="baseline"
          >
            <Row width="40" align="left">
              <Column
                align="center"
                height="40"
                :style="{
                  backgroundColor: 'rgb(199, 210, 254)',
                  borderRadius: '9999px',
                  color: 'rgb(79, 70, 229)',
                  fontWeight: 600,
                  height: '40px',
                  padding: '0',
                  width: '40px',
                }"
                valign="middle"
                width="40"
              >
                {{ index + 1 }}
              </Column>
            </Row>
          </Column>
          <Column width="100%" :style="{ width: '100%' }">
            <Text
              :style="{
                margin: '0',
                fontWeight: 600,
                fontSize: '20px',
                lineHeight: '28px',
                color: 'rgb(17, 24, 39)',
              }"
            >
              {{ feature.title }}
            </Text>
            <Text
              :style="{
                margin: '0',
                fontWeight: 600,
                paddingTop: '8px',
                fontSize: '16px',
                lineHeight: '24px',
                color: 'rgb(107, 114, 128)',
              }"
            >
              {{ feature.description }}
            </Text>
          </Column>
        </Row>
      </Section>
    </template>
  </Section>
</template>
```

## Header and four paragraphs

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/header-and-four-paragraphs

### Tailwind

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

<template>
  <Section class="my-[16px]">
    <Row>
      <Text class="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]">
        Unleash Timeless Comfort in Your Home
      </Text>
      <Text class="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
        Elevate your space with impeccable quality, and versatile styles.
      </Text>
    </Row>
    <Row class="mt-[16px]">
      <Column class="w-1/2 pr-[12px] align-baseline" :colspan="1">
        <Img
          alt="heart icon"
          height="48"
          src="/static/heart-icon.png"
          width="48"
        />
        <Text
          class="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]"
        >
          Multifunctional Marvels
        </Text>
        <Text class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Discover comfort and style with our exquisite furniture collection at
          Acme. Transform your living space into a haven of timeless comfort
          with our range of plush sofas, elegant dining sets, cozy armchairs,
          and functional storage solutions.
        </Text>
      </Column>
      <Column class="w-1/2 pl-[12px] align-baseline" :colspan="1">
        <Img
          alt="rocket icon"
          height="48"
          src="/static/rocket-icon.png"
          width="48"
        />
        <Text
          class="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]"
        >
          Impeccable Quality
        </Text>
        <Text class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Quality is our priority. Our furniture is meticulously crafted by
          skilled artisans, ensuring durability and elegance. From solid wood
          frames to carefully selected upholstery fabrics, each piece is
          thoughtfully designed to deliver unmatched quality.
        </Text>
      </Column>
    </Row>
    <Row class="mt-[32px]">
      <Column class="w-1/2 pr-[12px] align-baseline" :colspan="1">
        <Img
          alt="megaphone icon"
          height="48"
          src="/static/megaphone-icon.png"
          width="48"
        />
        <Text
          class="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]"
        >
          Versatile Styles
        </Text>
        <Text class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Express your unique style with our diverse range of furniture options.
          Whether you prefer contemporary minimalism, rustic charm, or timeless
          elegance, our selection offers something to complement every taste.
          Choose from sleek modern lines to ornate detailing.
        </Text>
      </Column>
      <Column class="w-1/2 pl-[12px] align-baseline" :colspan="1">
        <Img
          alt="cube icon"
          height="48"
          src="/static/cube-icon.png"
          width="48"
        />
        <Text
          class="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]"
        >
          Personalized Service
        </Text>
        <Text class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Experience personalised service at Acme. Our friendly team is
          dedicated to assisting you in finding the perfect furniture pieces.
          From fabric selection to space planning, we're here to ensure your
          complete satisfaction. Indulge in the luxury of personalised furniture
          shopping.
        </Text>
      </Column>
    </Row>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section :style="{ marginTop: '16px', marginBottom: '16px' }">
    <Row>
      <Text
        :style="{
          margin: '0px',
          fontSize: '24px',
          lineHeight: '32px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }"
      >
        Unleash Timeless Comfort in Your Home
      </Text>
      <Text
        :style="{
          marginTop: '8px',
          fontSize: '16px',
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }"
      >
        Elevate your space with impeccable quality, and versatile styles.
      </Text>
    </Row>
    <Row :style="{ marginTop: '16px' }">
      <Column
        :colspan="1"
        :style="{
          width: '50%',
          paddingRight: '12px',
          verticalAlign: 'baseline',
        }"
      >
        <Img
          alt="heart icon"
          height="48"
          src="/static/heart-icon.png"
          width="48"
        />
        <Text
          :style="{
            margin: '0px',
            marginTop: '16px',
            fontSize: '20px',
            lineHeight: '28px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Multifunctional Marvels
        </Text>
        <Text
          :style="{
            marginBottom: '0px',
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Discover comfort and style with our exquisite furniture collection at
          Acme. Transform your living space into a haven of timeless comfort
          with our range of plush sofas, elegant dining sets, cozy armchairs,
          and functional storage solutions.
        </Text>
      </Column>
      <Column
        :colspan="1"
        :style="{
          paddingLeft: '12px',
          verticalAlign: 'baseline',
          width: '50%',
        }"
      >
        <Img
          alt="rocket icon"
          height="48"
          src="/static/rocket-icon.png"
          width="48"
        />
        <Text
          :style="{
            margin: '0px',
            marginTop: '16px',
            fontSize: '20px',
            lineHeight: '28px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Impeccable Quality
        </Text>
        <Text
          :style="{
            marginBottom: '0px',
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Quality is our priority. Our furniture is meticulously crafted by
          skilled artisans, ensuring durability and elegance. From solid wood
          frames to carefully selected upholstery fabrics, each piece is
          thoughtfully designed to deliver unmatched quality.
        </Text>
      </Column>
    </Row>
    <Row :style="{ marginTop: '32px' }">
      <Column
        :colspan="1"
        :style="{
          width: '50%',
          paddingRight: '12px',
          verticalAlign: 'baseline',
        }"
      >
        <Img
          alt="megaphone icon"
          height="48"
          src="/static/megaphone-icon.png"
          width="48"
        />
        <Text
          :style="{
            margin: '0px',
            marginTop: '16px',
            fontSize: '20px',
            lineHeight: '28px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Versatile Styles
        </Text>
        <Text
          :style="{
            marginBottom: '0px',
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Express your unique style with our diverse range of furniture options.
          Whether you prefer contemporary minimalism, rustic charm, or timeless
          elegance, our selection offers something to complement every taste.
          Choose from sleek modern lines to ornate detailing.
        </Text>
      </Column>
      <Column
        :colspan="1"
        :style="{
          width: '50%',
          paddingLeft: '12px',
          verticalAlign: 'baseline',
        }"
      >
        <Img
          alt="cube icon"
          height="48"
          src="/static/cube-icon.png"
          width="48"
        />
        <Text
          :style="{
            margin: '0px',
            marginTop: '16px',
            fontSize: '20px',
            lineHeight: '28px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Personalized Service
        </Text>
        <Text
          :style="{
            marginBottom: '0px',
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Experience personalised service at Acme. Our friendly team is
          dedicated to assisting you in finding the perfect furniture pieces.
          From fabric selection to space planning, we're here to ensure your
          complete satisfaction. Indulge in the luxury of personalised furniture
          shopping.
        </Text>
      </Column>
    </Row>
  </Section>
</template>
```

## Header, four paragraphs and two columns

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/header-and-four-paragraphs-and-two-columns

### Tailwind

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

<template>
  <Section class="my-[16px]">
    <Row>
      <Text class="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]">
        Modern Comfort
      </Text>
      <Text class="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
        Experience contemporary bliss with our sleek and cozy furniture
        collection, designed for optimal comfort and style
      </Text>
    </Row>
    <table width="100%">
      <tbody>
        <tr class="mt-[16px] w-full">
          <td align="center" class="w-1/2 pr-[12px] align-baseline">
            <Img
              alt="heart icon"
              height="48"
              src="/static/heart-icon.png"
              width="48"
            />
            <Text
              class="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]"
            >
              Timeless Beauty
            </Text>
            <Text
              class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]"
            >
              Indulge in the enduring beauty of our furniture pieces, crafted
              with exquisite attention to detail and timeless design
            </Text>
          </td>
          <td align="center" class="w-1/2 pr-[12px] align-baseline">
            <Img
              alt="rocket icon"
              height="48"
              src="/static/rocket-icon.png"
              width="48"
            />
            <Text
              class="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]"
            >
              Effortless Function
            </Text>
            <Text
              class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]"
            >
              Discover furniture that seamlessly combines form and function,
              making everyday living a breeze with its practicality
            </Text>
          </td>
        </tr>
        <tr class="mt-[16px] w-full">
          <td align="center" class="w-1/2 pr-[12px] align-baseline">
            <Img
              alt="megaphone icon"
              height="48"
              src="/static/megaphone-icon.png"
              width="48"
            />
            <Text
              class="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]"
            >
              Customize Your Space
            </Text>
            <Text
              class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]"
            >
              Personalize your living environment with our customizable
              furniture options, allowing you to tailor your space to perfection
            </Text>
          </td>
          <td align="center" class="w-1/2 pr-[12px] align-baseline">
            <Img
              alt="cube icon"
              height="48"
              src="/static/cube-icon.png"
              width="48"
            />
            <Text
              class="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]"
            >
              Outdoor Serenity
            </Text>
            <Text
              class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]"
            >
              Create a tranquil outdoor retreat with our premium outdoor
              furniture, offering both durability and serene relaxation
            </Text>
          </td>
        </tr>
      </tbody>
    </table>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section :style="{ marginTop: '16px', marginBottom: '16px' }">
    <Row>
      <Text
        :style="{
          margin: '0px',
          fontSize: '24px',
          lineHeight: '32px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }"
      >
        Modern Comfort
      </Text>
      <Text
        :style="{
          marginTop: '8px',
          fontSize: '16px',
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }"
      >
        Experience contemporary bliss with our sleek and cozy furniture
        collection, designed for optimal comfort and style
      </Text>
    </Row>
    <table width="100%">
      <tbody>
        <tr :style="{ width: '100%', marginTop: '16px' }">
          <td
            align="center"
            :style="{
              width: '50%',
              paddingRight: '12px',
              verticalAlign: 'baseline',
            }"
          >
            <Img
              alt="heart icon"
              height="48"
              src="/static/heart-icon.png"
              width="48"
            />
            <Text
              :style="{
                margin: '0px',
                marginTop: '16px',
                fontSize: '20px',
                lineHeight: '28px',
                fontWeight: 600,
                color: 'rgb(17,24,39)',
              }"
            >
              Timeless Beauty
            </Text>
            <Text
              :style="{
                marginBottom: '0px',
                marginTop: '8px',
                fontSize: '16px',
                lineHeight: '24px',
                color: 'rgb(107,114,128)',
              }"
            >
              Indulge in the enduring beauty of our furniture pieces, crafted
              with exquisite attention to detail and timeless design
            </Text>
          </td>
          <td
            align="center"
            :style="{
              width: '50%',
              paddingRight: '12px',
              verticalAlign: 'baseline',
            }"
          >
            <Img
              alt="rocket icon"
              height="48"
              src="/static/rocket-icon.png"
              width="48"
            />
            <Text
              :style="{
                margin: '0px',
                marginTop: '16px',
                fontSize: '20px',
                lineHeight: '28px',
                fontWeight: 600,
                color: 'rgb(17,24,39)',
              }"
            >
              Effortless Function
            </Text>
            <Text
              :style="{
                marginBottom: '0px',
                marginTop: '8px',
                fontSize: '16px',
                lineHeight: '24px',
                color: 'rgb(107,114,128)',
              }"
            >
              Discover furniture that seamlessly combines form and function,
              making everyday living a breeze with its practicality
            </Text>
          </td>
        </tr>
        <tr :style="{ width: '100%', marginTop: '16px' }">
          <td
            align="center"
            :style="{
              width: '50%',
              paddingRight: '12px',
              verticalAlign: 'baseline',
            }"
          >
            <Img
              alt="megaphone icon"
              height="48"
              src="/static/megaphone-icon.png"
              width="48"
            />
            <Text
              :style="{
                margin: '0px',
                marginTop: '16px',
                fontSize: '20px',
                lineHeight: '28px',
                fontWeight: 600,
                color: 'rgb(17,24,39)',
              }"
            >
              Customize Your Space
            </Text>
            <Text
              :style="{
                marginBottom: '0px',
                marginTop: '8px',
                fontSize: '16px',
                lineHeight: '24px',
                color: 'rgb(107,114,128)',
              }"
            >
              Personalize your living environment with our customizable
              furniture options, allowing you to tailor your space to perfection
            </Text>
          </td>
          <td
            align="center"
            :style="{
              width: '50%',
              paddingRight: '12px',
              verticalAlign: 'baseline',
            }"
          >
            <Img
              alt="cube icon"
              height="48"
              src="/static/cube-icon.png"
              width="48"
            />
            <Text
              :style="{
                margin: '0px',
                marginTop: '16px',
                fontSize: '20px',
                lineHeight: '28px',
                fontWeight: 600,
                color: 'rgb(17,24,39)',
              }"
            >
              Outdoor Serenity
            </Text>
            <Text
              :style="{
                marginBottom: '0px',
                marginTop: '8px',
                fontSize: '16px',
                lineHeight: '24px',
                color: 'rgb(107,114,128)',
              }"
            >
              Create a tranquil outdoor retreat with our premium outdoor
              furniture, offering both durability and serene relaxation
            </Text>
          </td>
        </tr>
      </tbody>
    </table>
  </Section>
</template>
```

## Header and three centered paragraphs

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/header-and-three-centered-paragraphs

### Tailwind

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

<template>
  <Section class="my-[16px]">
    <Row>
      <Text class="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]">
        Modern Comfort
      </Text>
      <Text class="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
        Experience contemporary bliss with our sleek and cozy furniture
        collection, designed for optimal comfort and style
      </Text>
    </Row>
    <Row class="mt-[16px]">
      <Column align="center" class="w-1/3 pr-[12px] align-baseline">
        <Img
          alt="heart icon"
          height="48"
          src="/static/heart-icon.png"
          width="48"
        />
        <Text
          class="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[24px]"
        >
          Timeless Charm
        </Text>
        <Text class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Classic designs that never go out of style. Experience enduring
          elegance
        </Text>
      </Column>
      <Column align="center" class="w-1/3 pl-[12px] align-baseline">
        <Img
          alt="rocket icon"
          height="48"
          src="/static/rocket-icon.png"
          width="48"
        />
        <Text
          class="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]"
        >
          Functional Beauty
        </Text>
        <Text class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Seamlessly blending form and function. Furniture that enhances your
          everyday life.
        </Text>
      </Column>
      <Column align="center" class="w-1/3 pl-[12px] align-baseline">
        <Img
          alt="megaphone icon"
          height="48"
          src="/static/megaphone-icon.png"
          width="48"
        />
        <Text
          class="m-0 mt-[16px] font-semibold text-[20px] text-gray-900 leading-[28px]"
        >
          Endless Comfort
        </Text>
        <Text class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Sink into pure relaxation. Discover furniture that embraces your
          well-being.
        </Text>
      </Column>
    </Row>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section :style="{ marginTop: '16px', marginBottom: '16px' }">
    <Row>
      <Text
        :style="{
          margin: '0px',
          fontSize: '24px',
          lineHeight: '32px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }"
      >
        Modern Comfort
      </Text>
      <Text
        :style="{
          marginTop: '8px',
          fontSize: '16px',
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }"
      >
        Experience contemporary bliss with our sleek and cozy furniture
        collection, designed for optimal comfort and style
      </Text>
    </Row>
    <Row :style="{ marginTop: '16px' }">
      <Column
        align="center"
        :style="{
          width: '33.333333%',
          paddingRight: '12px',
          verticalAlign: 'baseline',
        }"
      >
        <Img
          alt="heart icon"
          height="48"
          src="/static/heart-icon.png"
          width="48"
        />
        <Text
          :style="{
            margin: '0px',
            marginTop: '16px',
            fontSize: '20px',
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Timeless Charm
        </Text>
        <Text
          :style="{
            marginBottom: '0px',
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Classic designs that never go out of style. Experience enduring
          elegance
        </Text>
      </Column>
      <Column
        align="center"
        :style="{
          width: '33.333333%',
          paddingLeft: '12px',
          verticalAlign: 'baseline',
        }"
      >
        <Img
          alt="rocket icon"
          height="48"
          src="/static/rocket-icon.png"
          width="48"
        />
        <Text
          :style="{
            margin: '0px',
            marginTop: '16px',
            fontSize: '20px',
            lineHeight: '28px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Functional Beauty
        </Text>
        <Text
          :style="{
            marginBottom: '0px',
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Seamlessly blending form and function. Furniture that enhances your
          everyday life.
        </Text>
      </Column>
      <Column
        align="center"
        :style="{
          width: '33.333333%',
          paddingLeft: '12px',
          verticalAlign: 'baseline',
        }"
      >
        <Img
          alt="megaphone icon"
          height="48"
          src="/static/megaphone-icon.png"
          width="48"
        />
        <Text
          :style="{
            margin: '0px',
            marginTop: '16px',
            fontSize: '20px',
            lineHeight: '28px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Endless Comfort
        </Text>
        <Text
          :style="{
            marginBottom: '0px',
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Sink into pure relaxation. Discover furniture that embraces your
          well-being.
        </Text>
      </Column>
    </Row>
  </Section>
</template>
```
