` elements are only inserted if the corresponding
strings are set. A simplified version of the [generated HTML](docs/example.html)
is:
```html
```
The order of the image and text columns is reversed if `image-position` is set
to `right`.
## Styling
The following `mj-class` elements are available for styling with
[`
`](https://documentation.mjml.io/#mj-attributes):
- `signoff`
- `signoff__image-wrapper`
- `signoff__image`
- `signoff__text-wrapper`
- `signoff__text`
And the following CSS classes are available for styling with
[``](https://documentation.mjml.io/#mj-style):
- `signoff`
- `signoff__image-wrapper`
- `signoff__image`
- `signoff__text-wrapper`
- `signoff__text`
- `signoff__closing`
- `signoff__name`
- `signoff__title`
- `signoff__title2`
- `signoff__title3`
- `signoff__custom`
You can see how each of these are used in the
[example MJML file](docs/example.mjml).
## Options
Available options for ``:
| option | unit | details | default value |
| --------------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `closing` | string | Optional closing, e.g. `Thank you,` | none |
| `name` | string | Optional name, e.g. `John Q. Public` | none |
| `title` | string | Optional title, e.g. `Your Friendly Neighbor` | none |
| `title2` | string | Optional title line two, e.g. `Example, Inc.` | none |
| `title3` | string | Optional title line three, e.g. `(202) 555-1212` | none |
| `section-padding` | pixels | Applies to entire element | `10px 0` |
| `section-align` | `left`, `center`, `right` | Alignment of element as a whole | `left` |
| `background-color` | color | Applies to entire element | none |
| `image-position` | `left`, `right` | Where the image should appear relative to the text | `left` |
| `image-padding` | pixels | Applies only to the image column | none |
| `image-src` | URL | Location of image | none |
| `image-width` | pixels | Width of image | none |
| `image-height` | pixels | Height of image | none |
| `image-alt` | string | Alternative text for image (you may legitimately wish to leave this blank; see [the spec for graphical representation](https://html.spec.whatwg.org/multipage/images.html#a-graphical-representation-of-some-of-the-surrounding-text), [decorative images](https://html.spec.whatwg.org/multipage/images.html#a-purely-decorative-image-that-doesn't-add-any-information) and [example 2 here](https://webaim.org/techniques/alttext/#context)) | none |
| `text-column-padding` | pixels | Applies only to the text column | `0 10px` |
## Adding this to your emails
In your MJML project directory, install this package via npm:
```sh
npm install mjml-signoff
```
In your build process script (such as gulp), require the package:
```js
const mjmlSignoff = require('mjml-signoff')
```
or
```js
import mjmlSignoff from mjml-signoff
```
Finally, add the package to your `.mjmlconfig`:
```json
{
"packages": ["mjml-signoff"]
}
```
You can now use `` in your MJML emails.
## Fork or contribute to this component
If you want to edit this component, first grab it via git:
```sh
git clone https://github.com/premail/mjml-signoff.git
```
Navigate to the folder and install:
```sh
cd mjml-signoff
npm install
```
Edit the component script file in `./components/`, then run `gulp build` or
`gulp watch` to compile. We include
[sheerun/modern-node](https://github.com/sheerun/modern-node), which formats and
lints code automatically on commits using [Prettier](https://prettier.io/) and
[ESLint](https://eslint.org/). You can use `npm run format` and `npm run lint`
on their own as well.
To run tests, use `npm run test`
If you want to use a forked version of this component in your emails without
having to publish it to npm, see
[premail/mjml-custom-component](https://github.com/premail/mjml-custom-component)
for a guide.
# Alternatives
As an alternative to ``, you can use the
[``](https://documentation.mjml.io/#mj-group) element, but note its
warning for iOS 9.
If you are not using an image in your sign-off, or you are including an image on
a line by itself (such as an image of a signature) you can simply use the
default `` and `` elements.
# Security
Legalese: This component is provided **"as is"** without any warranty. Use at
your own risk.
_For more information and to report security issues, please refer to our
[security documentation](https://github.com/premail/mjml-signoff/blob/main/docs/SECURITY.md)._
# License
`mjml-signoff` is licensed under the GNU Affero General Public License v3.0 or
later. To be clear: This license only covers the component's code, _not_ any
content you generate _using_ it.
For the legal details of the AGPL, see the complete
[LICENSE](https://github.com/premail/mjml-signoff/blob/main/LICENSE).
---
_Source: https://npm.io/package/mjml-signoff · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
