# Section

> Section components for dividing content into distinct sections with rows and columns.

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

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

## Simple section

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

### Vue

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

<template>
  <Section>
    <Text>Hello my section!</Text>
  </Section>
</template>
```

## Section with rows and columns

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

### Vue

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

<template>
  <Section>
    <Row>
      <Column>Column 1, Row 1</Column>
      <Column>Column 2, Row 1</Column>
    </Row>
    <Row>
      <Column>Column 1, Row 2</Column>
      <Column>Column 2, Row 2</Column>
    </Row>
  </Section>
</template>
```