# Articles

> Components for creating various types of articles, including layouts with images and cards.

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

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

## Article with image

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

### Tailwind

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

<template>
  <Section class="my-[16px]">
    <Img
      alt="Herman Miller Chair"
      class="w-full rounded-[12px] object-cover"
      height="320"
      src="/static/herman-miller-chair.jpg"
    />
    <Section class="mt-[32px] text-center">
      <Text
        class="my-[16px] font-semibold text-[18px] text-indigo-600 leading-[28px]"
      >
        Our new article
      </Text>
      <Heading
        as="h1"
        class="m-0 mt-[8px] font-semibold text-[36px] text-gray-900 leading-[36px]"
      >
        Designing with Furniture
      </Heading>
      <Text class="text-[16px] text-gray-500 leading-[24px]">
        Unleash your inner designer as we explore how furniture plays a vital
        role in creating stunning interiors, offering insights into choosing the
        right pieces, arranging them harmoniously, and infusing your space with
        personality.
      </Text>
      <Button
        class="mt-[16px] rounded-[8px] bg-indigo-600 px-[40px] py-[12px] font-semibold text-white"
        href="https://vuemail.dev"
      >Read more</Button>
    </Section>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section :style="{ marginTop: '16px', marginBottom: '16px' }">
    <Img
      alt="Herman Miller Chair"
      height="320"
      src="/static/herman-miller-chair.jpg"
      :style="{ width: '100%', borderRadius: '12px', objectFit: 'cover' }"
    />
    <Section :style="{ marginTop: '32px', textAlign: 'center' }">
      <Text
        :style="{
          marginTop: '16px',
          marginBottom: '16px',
          fontSize: '18px',
          lineHeight: '28px',
          fontWeight: 600,
          color: 'rgb(79,70,229)',
        }"
      >
        Our new article
      </Text>
      <Heading
        as="h1"
        :style="{
          margin: '0px',
          marginTop: '8px',
          fontSize: '36px',
          lineHeight: '36px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }"
      >
        Designing with Furniture
      </Heading>
      <Text
        :style="{
          fontSize: '16px',
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }"
      >
        Unleash your inner designer as we explore how furniture plays a vital
        role in creating stunning interiors, offering insights into choosing the
        right pieces, arranging them harmoniously, and infusing your space with
        personality.
      </Text>
      <Button
        href="https://vuemail.dev"
        :style="{
          marginTop: '16px',
          borderRadius: '8px',
          backgroundColor: 'rgb(79,70,229)',
          paddingLeft: '40px',
          paddingRight: '40px',
          paddingTop: '12px',
          paddingBottom: '12px',
          fontWeight: 600,
          color: 'rgb(255,255,255)',
        }"
      >Read more</Button>
    </Section>
  </Section>
</template>
```

## Article with image on right

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

### Tailwind

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

<template>
  <Section class="my-[16px] text-center">
    <Section class="inline-block w-full max-w-[250px] text-left align-top">
      <Text
        class="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]"
      >
        What's new
      </Text>
      <Text
        class="m-0 mt-[8px] font-semibold text-[20px] text-gray-900 leading-[28px]"
      >
        Versatile Comfort
      </Text>
      <Text class="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>
      <Link
        class="text-indigo-600 underline"
        href="https://vuemail.dev"
      >Read more</Link>
    </Section>
    <Section class="my-[8px] inline-block w-full max-w-[220px] align-top">
      <Img
        alt="An aesthetic picture taken of an Iphone, flowers, glasses and a card that reads 'Gucci, bloom' coming out of a leathered bag with a ziper"
        class="rounded-[8px] object-cover"
        :height="220"
        src="/static/versatile-comfort.jpg"
        :width="220"
      />
    </Section>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section
    :style="{ marginTop: '16px', textAlign: 'center', marginBottom: '16px' }"
  >
    <Section
      :style="{
        display: 'inline-block',
        textAlign: 'left',
        width: '100%',
        maxWidth: '250px',
        verticalAlign: 'top',
      }"
    >
      <Text
        :style="{
          margin: '0px',
          fontSize: '16px',
          lineHeight: '24px',
          fontWeight: 600,
          color: 'rgb(79,70,229)',
        }"
      >
        What's new
      </Text>
      <Text
        :style="{
          margin: '0px',
          marginTop: '8px',
          fontSize: '20px',
          lineHeight: '28px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }"
      >
        Versatile Comfort
      </Text>
      <Text
        :style="{
          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>
      <Link
        href="https://vuemail.dev"
        :style="{ color: 'rgb(79,70,229)', textDecorationLine: 'underline' }"
      >Read more</Link>
    </Section>
    <Section
      :style="{
        display: 'inline-block',
        marginTop: '8px',
        marginBottom: '8px',
        width: '100%',
        maxWidth: '220px',
        verticalAlign: 'top',
      }"
    >
      <Img
        alt="An aesthetic picture taken of an Iphone, flowers, glasses and a card that reads 'Gucci, bloom' coming out of a leathered bag with a ziper"
        :height="220"
        src="/static/versatile-comfort.jpg"
        :style="{ borderRadius: '8px', objectFit: 'cover' }"
        :width="220"
      />
    </Section>
  </Section>
</template>
```

## Article with image as background

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/article-with-image-as-background

### Tailwind

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

// Notes for future exploration on finding a way to do this inside of
// Desktop Outlook:
// - https://backgrounds.cm/
// - use VML https://learn.microsoft.com/en-us/windows/win32/vml/msdn-online-vml-fill-element

const tableStyle = {
  // This url must be in quotes for Yahoo
  backgroundImage: "url('/static/my-image.png')",
  backgroundSize: '100% 100%',
};
</script>

<template>
  <table
    align="center"
    :border="0"
    cellpadding="0"
    cellspacing="0"
    class="my-[16px] h-[424px] rounded-[12px] bg-blue-600"
    role="presentation"
    :style="tableStyle"
    width="100%"
  >
    <tbody>
      <tr>
        <td align="center" class="p-[40px] text-center">
          <Text class="m-0 font-semibold text-gray-200">New article</Text>
          <Heading as="h1" class="m-0 mt-[4px] font-bold text-white">
            Artful Accents
          </Heading>
          <Text class="m-0 mt-[8px] text-[16px] text-white leading-[24px]">
            Uncover the power of accent furniture in transforming your space
            with subtle touches of style, personality, and functionality, as we
            explore the art of curating captivating accents.
          </Text>
          <Button
            class="mt-[24px] rounded-[8px] border border-gray-200 border-solid bg-white px-[40px] py-[12px] font-semibold text-gray-900"
            href="https://vuemail.dev"
          >Read more</Button>
        </td>
      </tr>
    </tbody>
  </table>
</template>
```

### Inline styles

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

// Notes for future exploration on finding a way to do this inside of
// Desktop Outlook:
// - https://backgrounds.cm/
// - use VML https://learn.microsoft.com/en-us/windows/win32/vml/msdn-online-vml-fill-element

const tableStyle = {
  height: '424px',
  marginTop: '16px',
  marginBottom: '16px',
  borderRadius: '12px',
  backgroundColor: 'rgb(37,99,235)',
  // This url must be in quotes for Yahoo
  backgroundImage: "url('/static/my-image.png')",
  backgroundSize: '100% 100%',
};
</script>

<template>
  <table
    align="center"
    :border="0"
    cellpadding="0"
    cellspacing="0"
    role="presentation"
    :style="tableStyle"
    width="100%"
  >
    <tbody>
      <tr>
        <td align="center" :style="{ padding: '40px', textAlign: 'center' }">
          <Text
            :style="{
              margin: '0px',
              fontWeight: 600,
              color: 'rgb(229,231,235)',
            }"
          >
            New article
          </Text>
          <Heading
            as="h1"
            :style="{
              margin: '0px',
              marginTop: '4px',
              fontWeight: 700,
              color: 'rgb(255,255,255)',
            }"
          >
            Artful Accents
          </Heading>
          <Text
            :style="{
              margin: '0px',
              marginTop: '8px',
              fontSize: '16px',
              lineHeight: '24px',
              color: 'rgb(255,255,255)',
            }"
          >
            Uncover the power of accent furniture in transforming your space
            with subtle touches of style, personality, and functionality, as we
            explore the art of curating captivating accents.
          </Text>
          <Button
            href="https://vuemail.dev"
            :style="{
              marginTop: '24px',
              borderRadius: '8px',
              borderWidth: '1px',
              borderStyle: 'solid',
              borderColor: 'rgb(229,231,235)',
              backgroundColor: 'rgb(255,255,255)',
              paddingLeft: '40px',
              paddingRight: '40px',
              paddingTop: '12px',
              paddingBottom: '12px',
              fontWeight: 600,
              color: 'rgb(17,24,39)',
            }"
          >Read more</Button>
        </td>
      </tr>
    </tbody>
  </table>
</template>
```

## Article with two cards

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/article-with-two-cards

### 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-[20px] text-gray-900 leading-[28px]">
        Elevate Outdoor Living
      </Text>
      <Text class="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
        Take your outdoor space to new heights with our premium outdoor
        furniture, designed to elevate your alfresco experience.
      </Text>
    </Row>
    <Row class="mt-[16px]">
      <Column class="box-border w-[50%] pr-[8px] align-baseline" :colspan="1">
        <Img
          alt="A picture of a pink background with varios items laid out. Shoes, lipstick, sunglasses, some leafs and part of a purse."
          class="w-full rounded-[8px] object-cover"
          height="180"
          src="/static/outdoor-living.jpg"
        />
        <Text class="font-semibold text-[16px] text-indigo-600 leading-[24px]">
          What's new
        </Text>
        <Text
          class="m-0 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 the innovative world of multifunctional furniture, where
          style meets practicality, offering creative solutions for maximizing
          space and enhancing functionality in your home
        </Text>
      </Column>
      <Column class="box-border w-[50%] pl-[8px] align-baseline" :colspan="1">
        <Img
          alt="A picture of a pink background with varios items laid out. Shoes, lipstick, sunglasses, some leafs and part of a purse."
          class="w-full rounded-[8px] object-cover"
          height="180"
          src="/static/outdoor-living.jpg"
        />
        <Text class="font-semibold text-[16px] text-indigo-600 leading-[24px]">
          What's new
        </Text>
        <Text
          class="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]"
        >
          Timeless Classics
        </Text>
        <Text class="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Step into the world of timeless classics as we explore iconic
          furniture pieces that have stood the test of time, adding enduring
          elegance and sophistication to any interior
        </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: '20px',
          lineHeight: '28px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }"
      >
        Elevate Outdoor Living
      </Text>
      <Text
        :style="{
          marginTop: '8px',
          fontSize: '16px',
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }"
      >
        Take your outdoor space to new heights with our premium outdoor
        furniture, designed to elevate your alfresco experience.
      </Text>
    </Row>
    <Row :style="{ marginTop: '16px' }">
      <Column
        :colspan="1"
        :style="{
          width: '50%',
          verticalAlign: 'baseline',
          paddingRight: '8px',
          boxSizing: 'border-box',
        }"
      >
        <Img
          alt="A picture of a pink background with varios items laid out. Shoes, lipstick, sunglasses, some leafs and part of a purse."
          height="180"
          src="/static/outdoor-living.jpg"
          :style="{ width: '100%', borderRadius: '8px', objectFit: 'cover' }"
        />
        <Text
          :style="{
            fontSize: '16px',
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(79,70,229)',
          }"
        >
          What's new
        </Text>
        <Text
          :style="{
            margin: '0px',
            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 the innovative world of multifunctional furniture, where
          style meets practicality, offering creative solutions for maximizing
          space and enhancing functionality in your home
        </Text>
      </Column>
      <Column
        :colspan="1"
        :style="{
          width: '50%',
          verticalAlign: 'baseline',
          paddingLeft: '8px',
          boxSizing: 'border-box',
        }"
      >
        <Img
          alt="A picture of a pink background with varios items laid out. Shoes, lipstick, sunglasses, some leafs and part of a purse."
          height="180"
          src="/static/outdoor-living.jpg"
          :style="{ width: '100%', borderRadius: '8px', objectFit: 'cover' }"
        />
        <Text
          :style="{
            fontSize: '16px',
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(79,70,229)',
          }"
        >
          What's new
        </Text>
        <Text
          :style="{
            margin: '0px',
            fontSize: '20px',
            lineHeight: '28px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }"
        >
          Timeless Classics
        </Text>
        <Text
          :style="{
            marginBottom: '0px',
            marginTop: '8px',
            fontSize: '16px',
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }"
        >
          Step into the world of timeless classics as we explore iconic
          furniture pieces that have stood the test of time, adding enduring
          elegance and sophistication to any interior
        </Text>
      </Column>
    </Row>
  </Section>
</template>
```

## Article with single author

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/article-with-single-author

### Tailwind

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

<template>
  <Section>
    <Hr class="!border-gray-300 my-[16px]" />
    <Row :width="undefined">
      <Column
        width="48"
        height="48"
        class="pt-[5px] h-[48px] w-[48px]"
        align="left"
      >
        <Img
          alt="Steve Jobs"
          class="block h-[48px] w-[48px] rounded-full object-cover object-center"
          height="48"
          src="https://vuemail.dev/static/steve-jobs.jpg"
          width="48"
        />
      </Column>
      <Column width="120" class="pl-[18px] w-[120px]" align="left" valign="top">
        <Heading
          as="h3"
          class="m-[0px] font-medium text-[14px] text-gray-800 leading-[20px]"
        >
          Steve Jobs
        </Heading>
        <Text
          class="m-[0px] font-medium text-[12px] text-gray-500 leading-[14px]"
        >
          Co-Founder & CEO
        </Text>
        <Row :width="undefined" class="mt-[4px]" :align="undefined">
          <Column :width="undefined" valign="middle">
            <Link class="h-[12px] w-[12px]" href="#">
              <Img
                alt="X"
                src="https://vuemail.dev/static/x-icon.png"
                width="12"
                height="12"
                :style="{ height: '12px', width: '12px' }"
              />
            </Link>
          </Column>
          <Column :width="undefined" class="pl-[8px]" valign="middle">
            <Link class="h-[12px] w-[12px]" href="#">
              <Img
                alt="LinkedIn"
                src="https://vuemail.dev/static/in-icon.png"
                width="12"
                height="12"
                :style="{ height: '12px', width: '12px' }"
              />
            </Link>
          </Column>
        </Row>
      </Column>
    </Row>
  </Section>
</template>
```

### Inline styles

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

<template>
  <Section>
    <Hr
      :style="{
        borderColor: 'rgb(209,213,219) !important',
        marginTop: '16px',
        marginBottom: '16px',
      }"
    />
    <Row :width="undefined">
      <Column
        width="48"
        height="48"
        :style="{
          display: 'inline-block',
          paddingTop: '5px',
          height: '48px',
          width: '48px',
        }"
      >
        <Img
          alt="Steve Jobs"
          :height="48"
          src="/static/steve-jobs.jpg"
          :style="{
            borderRadius: '9999px',
            display: 'block',
            height: '48px',
            objectFit: 'cover',
            objectPosition: 'center',
            width: '48px',
          }"
          :width="48"
        />
      </Column>
      <Column
        width="120"
        :style="{ paddingLeft: '18px', maxWidth: '120px' }"
        align="left"
        valign="top"
      >
        <Heading
          as="h3"
          :style="{
            color: 'rgb(31,41,55)',
            fontSize: '14px',
            fontWeight: 500,
            lineHeight: '20px',
            margin: '0px',
          }"
        >
          Steve Jobs
        </Heading>
        <Text
          :style="{
            color: 'rgb(107,114,128)',
            fontSize: '12px',
            fontWeight: 500,
            lineHeight: '14px',
            margin: '0px',
          }"
        >
          Co-Founder & CEO
        </Text>
        <Row
          :align="undefined"
          :width="undefined"
          :style="{ marginTop: '4px' }"
        >
          <Column :width="undefined" valign="middle">
            <Link href="#" :style="{ height: '12px', width: '12px' }">
              <Img
                alt="X"
                src="/static/x-icon.png"
                width="12"
                height="12"
                :style="{ height: '12px', width: '12px' }"
              />
            </Link>
          </Column>
          <Column
            :width="undefined"
            valign="middle"
            :style="{ paddingLeft: '8px' }"
          >
            <Link href="#" :style="{ height: '12px', width: '12px' }">
              <Img
                alt="LinkedIn"
                src="/static/in-icon.png"
                width="12"
                height="12"
                :style="{ height: '12px', width: '12px' }"
              />
            </Link>
          </Column>
        </Row>
      </Column>
    </Row>
  </Section>
</template>
```

## Article with multiple authors

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/article-with-multiple-authors

### Tailwind

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

const authors = [
  {
    name: 'Steve Jobs',
    title: 'Co-Founder & CEO',
    imgSrc: '/static/steve-jobs.jpg',
    showDivider: true,
  },
  {
    name: 'Steve Wozniak',
    title: 'Co-Founder & CTO',
    imgSrc: '/static/steve-wozniak.jpg',
    showDivider: false,
  },
];
</script>

<template>
  <Section>
    <Hr class="!border-gray-300 mt-[16px] mb-[0px]" />
    <template v-for="author in authors" :key="author.name">
      <Row align="left" width="288" class="pt-[16px] w-[288px]">
        <Column
          width="48"
          height="48"
          align="left"
          class="pt-[5px] h-[48px] w-[48px]"
        >
          <Img
            :alt="author.name"
            class="block rounded-full object-cover object-center"
            :height="48"
            :src="author.imgSrc"
            :width="48"
          />
        </Column>
        <Column width="100%" class="pl-[18px] w-full" align="left" valign="top">
          <Heading
            as="h3"
            class="m-0 font-medium text-[14px] text-gray-900 leading-[20px]"
          >
            {{ author.name }}
          </Heading>
          <Text
            class="m-0 font-medium text-[12px] text-gray-500 leading-[14px]"
          >
            {{ author.title }}
          </Text>
          <Row :width="undefined" class="pt-[8px]" align="left">
            <Column width="12" height="12">
              <Link class="h-[12px] w-[12px]" href="#">
                <Img
                  alt="X"
                  :height="12"
                  src="/static/x-icon.png"
                  :width="12"
                />
              </Link>
            </Column>
            <Column class="pl-[8px]" width="12" height="12">
              <Link class="h-[12px] w-[12px]" href="#">
                <Img
                  alt="LinkedIn"
                  :height="12"
                  src="/static/in-icon.png"
                  :width="12"
                />
              </Link>
            </Column>
          </Row>
        </Column>
      </Row>
      <Hr
        v-if="author.showDivider"
        class="mr-[16px] inline-block h-[58px] w-[1px] bg-gray-300 [border:none]"
        :style="{ float: 'left' }"
      />
    </template>
  </Section>
</template>
```

### Inline styles

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

const authors = [
  {
    name: 'Steve Jobs',
    title: 'Co-Founder & CEO',
    imgSrc: '/static/steve-jobs.jpg',
    showDivider: true,
  },
  {
    name: 'Steve Wozniak',
    title: 'Co-Founder & CTO',
    imgSrc: '/static/steve-wozniak.jpg',
    showDivider: false,
  },
];
</script>

<template>
  <Section>
    <Hr
      :style="{
        borderColor: 'rgb(209,213,219) !important',
        marginTop: '16px',
        marginBottom: '0px',
      }"
    />
    <Section>
      <template v-for="author in authors" :key="author.name">
        <Row
          align="left"
          width="288"
          :style="{ marginTop: '16px', width: '288px' }"
        >
          <Column
            width="48"
            height="48"
            :style="{
              paddingTop: '5px',
              height: '48px',
              width: '48px',
              textAlign: 'left',
            }"
          >
            <Img
              :alt="author.name"
              :height="48"
              :src="author.imgSrc"
              :style="{
                borderRadius: '9999px',
                display: 'block',
                objectFit: 'cover',
                objectPosition: 'center',
              }"
              :width="48"
            />
          </Column>
          <Column
            width="100%"
            :style="{
              paddingLeft: '18px',
              width: '100%',
              textAlign: 'left',
              verticalAlign: 'top',
            }"
          >
            <Heading
              as="h3"
              :style="{
                color: 'rgb(17,24,39)',
                fontSize: '14px',
                fontWeight: 500,
                lineHeight: '20px',
                margin: '0px',
              }"
            >
              {{ author.name }}
            </Heading>
            <Text
              :style="{
                color: 'rgb(107,114,128)',
                fontSize: '12px',
                fontWeight: 500,
                lineHeight: '14px',
                margin: '0px',
              }"
            >
              {{ author.title }}
            </Text>
            <Row :width="undefined" :style="{ paddingTop: '8px' }" align="left">
              <Column width="12" height="12">
                <Link href="#" :style="{ height: '12px', width: '12px' }">
                  <Img
                    alt="X"
                    :height="12"
                    src="/static/x-icon.png"
                    :width="12"
                  />
                </Link>
              </Column>
              <Column width="12" height="12" :style="{ paddingLeft: '8px' }">
                <Link href="#" :style="{ height: '12px', width: '12px' }">
                  <Img
                    alt="LinkedIn"
                    :height="12"
                    src="/static/in-icon.png"
                    :width="12"
                  />
                </Link>
              </Column>
            </Row>
          </Column>
        </Row>
        <Hr
          v-if="author.showDivider"
          :style="{
            border: 'none',
            backgroundColor: 'rgb(209,213,219)',
            display: 'inline-block',
            float: 'left',
            height: '58px',
            marginRight: '16px',
            width: '1px',
          }"
        />
      </template>
    </Section>
  </Section>
</template>
```
