# Divider

> Divider components to separate content in rows or columns.

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

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

## Simple divider

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

### Tailwind

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

<template>
  <Text>Before divider</Text>
  <Hr class="my-[16px] border-gray-300 border-t-2" />
  <Text>After divider</Text>
</template>
```

### Inline styles

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

<template>
  <Text>Before divider</Text>
  <Hr
    :style="{
      marginTop: '16px',
      borderColor: 'rgb(209,213,219)',
      marginBottom: '16px',
      borderTopWidth: '2px',
    }"
  />
  <Text>After divider</Text>
</template>
```

## Divider between rows and columns

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/divider-between-rows-and-columns

### Tailwind

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

<template>
  <Row>
    <Column>First column</Column>
    <Column>Second column</Column>
  </Row>
  <Hr class="my-[16px] border-gray-300" />
  <Row>
    <Column>First column</Column>
    <Column>Second column</Column>
  </Row>
</template>
```

### Inline styles

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

<template>
  <Row>
    <Column>First column</Column>
    <Column>Second column</Column>
  </Row>
  <Hr
    :style="{
      marginTop: '16px',
      borderColor: 'rgb(209,213,219)',
      marginBottom: '16px',
    }"
  />
  <Row>
    <Column>First column</Column>
    <Column>Second column</Column>
  </Row>
</template>
```