# mjml-hero

> mjml-hero

Latest version **5.4.1** (published 2026-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install mjml-hero
pnpm add mjml-hero
yarn add mjml-hero
bun add mjml-hero
```

## Health

**Score 60/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 5.4.1 |
| Published | 2026-09-10 |
| First published | 2016-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 19.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18235 |
| Maintainers | mjmlio, iryusa, loeck, ngarnier, meriadec, kmcb, totocap |

## Links

- npm: https://www.npmjs.com/package/mjml-hero
- Repository: https://github.com/mjmlio/mjml
- Homepage: https://mjml.io
- Issues: https://github.com/mjmlio/mjml/issues
- npm.io page: https://npm.io/package/mjml-hero

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [mjml-core](https://npm.io/package/mjml-core.md) 5.4.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.28.4

## Recent versions

- 5.4.1 (latest) — 2026-09-10
- 5.2.0-beta.1 (beta) — 2026-05-06
- 5.0.0-alpha.11 (experimental) — 2026-02-10
- 4.7.0-beta.2 (next) — 2020-08-28
- 5.4.0 — 2026-06-29
- 5.3.0 — 2026-05-27
- 5.2.2 — 2026-05-19
- 5.2.1 — 2026-05-12
- 5.2.0 — 2026-05-07
- 5.1.0 — 2026-04-24
- 5.1.0-beta.1 — 2026-04-24
- 5.0.1 — 2026-04-16
- 5.1.0-alpha.1 — 2026-04-16
- 5.0.0 — 2026-04-16
- 5.0.0-beta.2 — 2026-03-19
- … 126 more at https://npm.io/package/mjml-hero/versions

## README

### mj-hero

Displays a hero image and behaves like an `mj-section` tag with a single `mj-column` tag.

The `background-height` and `background-width` attributes are mandatory and it's best to use an image with width the same as the `mj-body` (`width="600px"` by default) and height the same or larger than the `height` of `mj-hero`.

Use `background-color` to provide a fallback color in case an email client doesn't support `background-url`.

<div class="alert alert-note" role="alert">
  <p>Note</p>
  <p>The <code>height</code> attribute is only required for <code>mode="fixed-height"</code>.</p>
</div>

<figure>
  <figcaption>Fixed height</figcaption>
  <img src="https://static.mailjet.com/mjml-website/documentation/hero-example-1.png"
     alt="demo background picture with fixed height" />
</figure>

```xml
<mjml>
  <mj-body>
    <mj-hero
      mode="fixed-height"
      height="469px"
      background-width="600px"
      background-height="469px"
      background-url=
          "https://static.mailjet.com/mjml-website/documentation/hero.jpg"
      background-color="#2a3448"
      padding="100px 0px">
      <mj-text
        padding="20px"
        color="#ffffff"
        font-family="Helvetica"
        align="center"
        font-size="45px"
        line-height="45px"
        font-weight="900">
        GO TO SPACE
      </mj-text>
      <mj-button href="https://mjml.io/" align="center">
        ORDER YOUR TICKET NOW
      </mj-button>
    </mj-hero>
  </mj-body>
</mjml>
```

<figure>
  <figcaption>Fluid height</figcaption>
  <img src="https://static.mailjet.com/mjml-website/documentation/hero-example-1.png"
     alt="demo background picture with fixed height" />
</figure>

```xml
<mjml>
  <mj-body>
    <mj-hero
      mode="fluid-height"
      background-width="600px"
      background-height="469px"
      background-url=
          "https://static.mailjet.com/mjml-website/documentation/hero.jpg"
      background-color="#2a3448"
      padding="100px 0px">
      <mj-text
        padding="20px"
        color="#ffffff"
        font-family="Helvetica"
        align="center"
        font-size="45px"
        line-height="45px"
        font-weight="900">
        GO TO SPACE
      </mj-text>
      <mj-button href="https://mjml.io/" align="center">
        ORDER YOUR TICKET NOW
      </mj-button>
    </mj-hero>
  </mj-body>
</mjml>
```

#### Attributes

| attribute              | accepts                 | description                                                        | default value                 |
| ---------------------- | ----------------------- | ------------------------------------------------------------------ | ----------------------------- |
| background-color       | CSS color formats       | hero background color                                              | #ffffff                     |
| background-height      | `px` `%`                | height of the image used, mandatory                                |                               |
| background-position    | string                  | CSS values, i.e. `left` `center` `right` + `top` `center` `bottom` | `center center`               |
| background-url         | string                  | absolute background in URL format                                  | `null`                        |
| background-width       | `px` `%`                | width of the image used, mandatory                                 | inherits parent element width |
| border-radius          | string                  | border radius                                                      |                               |
| css-class              | string                  | class name, added to the root HTML element created                 |                               |
| height                 | `px` `%`                | hero section height, (required for `fixed-height` mode)            | `0px`                         |
| inner-background-color | CSS color formats       | content background color                                           |                               |
| inner-padding          | `px` `%`                | hero inner padding, supports up to 4 parameters                    |                               |
| inner-padding-bottom   | `px` `%`                | hero bottom inner padding                                          |                               |
| inner-padding-left     | `px` `%`                | hero left inner padding                                            |                               |
| inner-padding-right    | `px` `%`                | hero right inner padding                                           |                               |
| inner-padding-top      | `px` `%`                | hero top inner padding                                             |                               |
| mode                   | string                  | `fluid-height` or `fixed-height`                                   | `fluid-height`                |
| padding                | `px` `%`                | hero padding, supports up to 4 parameters                          | `0px`                         |
| padding-bottom         | `px` `%`                | hero bottom padding                                                | `null`                        |
| padding-left           | `px` `%`                | hero left padding                                                  | `null`                        |
| padding-right          | `px` `%`                | hero right padding                                                 | `null`                        |
| padding-top            | `px` `%`                | hero top padding                                                   | `null`                        |
| vertical-align         | `top` `middle` `bottom` | content vertical alignment                                         | `top`                         |

<ul class="cta-container">
  <li>Fixed height: <br><a class="cta" href="https://mjml.io/try-it-live/components/hero">Try it live</a></li>
  <li>Fluid height: <br><a class="cta" href="https://mjml.io/try-it-live/components/hero/1">Try it live</a></li>
</ul>

---
_Source: https://npm.io/package/mjml-hero · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._