mjml-hero

Display a section with a background image and some content inside (mj-text, mj-button, mj-image ...) wrapped in mj-hero-content component

Fixed height

<mjml>
  <mj-body>
    <mj-hero
      mode="fixed-height"
      height="469px"
      background-width="600px"
      background-height="469px"
      background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.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>

Fluid height

<mjml>
  <mj-body>
    <mj-hero
      mode="fluid-height"
      background-width="600px"
      background-height="469px"
      background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg"
      background-color="#2a3448"
      padding="100px 0px"
      width="100%">
      <!-- To add content like mj-image, mj-text, mj-button ... use the mj-hero-content component -->
      <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>

attribute | unit | description | default value --------------------|-------------------------------------|----------------------------------------------------------------------|-------------- background-color | color | hero background color | #ffffff background-height | px | height of the image used | 0px background-position | top/center/bottom left/center/right | background image position | center center background-url | url | absolute background url | n/a background-width | px | width of the image used | 0px css-class | string | class name, added to the root HTML element created | n/a height | px | hero section height (required for fixed-height mode) | 0px mode | fluid-height/fixed-height | choose if the height is fixed based on the height attribute or fluid | fluid-height padding | px | supports up to 4 parameters | 0px padding-bottom | px | bottom offset | 0px padding-left | px | left offset | 0px padding-right | px | right offset | 0px padding-top | px | top offset | 0px vertical-align | top/middle/bottom | content vertical alignment | top width | px | hero container width | parent element width