> ## Documentation Index
> Fetch the complete documentation index at: https://docs.emailux.com/llms.txt
> Use this file to discover all available pages before exploring further.

# BodyContent component

> Create BodyContent wrapper tag

## 1. Install dependencies

Install the EmailUX Email package locally and a few components.

<CodeGroup>
  ```bash theme={null}
  # pnpm
  pnpm add @emailux/components

  # npm
  npm install @emailux/components

  # yarn
  yarn add @emailux/components
  ```
</CodeGroup>

## 2. Usage

```tsx theme={null}
import { BodyContent } from "@emailux/components";

export default function EmailTemplate() {
  return <>
      <BodyContent>
          <title>Header</title>
      </BodyContent>

      <BodyContent>
          <title>Body</title>
      </BodyContent>

      <BodyContent>
          <title>Footer</title>
      </BodyContent>
  </>
}
```

## Props

| Name                    | Type                | Required | Default                                                                  | Description                                                                                                                                                      |
| ----------------------- | ------------------- | -------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children                | React.ReactNode     | Yes      | —                                                                        | Content of the email document                                                                                                                                    |
| dir                     | "ltr" \| "rtl"      | No       | Comes from wrapping `Html` component's `dir` context prop which is `ltr` | Text direction                                                                                                                                                   |
| background              | string              | Yes      | —                                                                        | —                                                                                                                                                                |
| backgroundColor         | string              | Yes      | —                                                                        | —                                                                                                                                                                |
| style                   | React.CSSProperties | No       | -                                                                        | -                                                                                                                                                                |
| width                   | number or "100%"    | No       | —                                                                        | width of container                                                                                                                                               |
| padding                 | string              | No       | `12px 20px`                                                              | inner padding                                                                                                                                                    |
| outerBgColor            | string              | No       | —                                                                        | When whidth is not `100%` and a number, you can set this value as Hex color value to set the left and right side of the section background color, not the inside |
| borderRadius            | string              | No       |                                                                          |                                                                                                                                                                  |
| className               | string              | no       | —                                                                        | —                                                                                                                                                                |
| backgroundPosition      | string              | no       | "bottom"                                                                 | when there is background image url this is css property for position                                                                                             |
| backgroundRepeat        | string              | no       | "no-repeat, no-repeat"                                                   | when there is background image url this is css property for repeat                                                                                               |
| bgImageTakesAllWrappers | string              | no       | false                                                                    | when there is background image url takes all if width is not 100%, but with 100% it already takes all                                                            |
| borderWidth             | number              | No       | —                                                                        | border width                                                                                                                                                     |
| borderColor             | string              | No       | —                                                                        | Border will work if border width is greater than 0                                                                                                               |