mjml-hero

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>
<<<<<<< HEAD
    <mj-hero
      mode="fixed-height"
      height="469px"
      width="100%"
      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">
      <!-- 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="45"
        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-container>
      <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">
        <!-- To add content like mj-image, mj-text, mj-button ... use the mj-hero-content component -->
        <mj-hero-content width="100%">
          <mj-text
            padding="20px"
            color="#ffffff"
            font-family="Helvetica"
            align="center"
            font-size="45"
            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-content>
      </mj-hero>
    </mj-container>
>>>>>>> 1294c3cbdcc8be8c571685b6805f5ec918e429a4
  </mj-body>
</mjml>

<<<<<<< HEAD ======= >>>>>>> 1294c3cbdcc8be8c571685b6805f5ec918e429a4

Fluid height

<mjml>
  <mj-body>
<<<<<<< HEAD
    <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="45"
        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-container>
      <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">
        <!-- To add content like mj-image, mj-text, mj-button ... use the mj-hero-content component -->
        <mj-hero-content width="100%">
          <mj-text
          padding="20px"
          color="#ffffff"
          font-family="Helvetica"
          align="center"
          font-size="45"
          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-content>
      </mj-hero>
    </mj-container>
>>>>>>> 1294c3cbdcc8be8c571685b6805f5ec918e429a4
  </mj-body>
</mjml>

<<<<<<< HEAD ======= >>>>>>> 1294c3cbdcc8be8c571685b6805f5ec918e429a4

The height attribute is required only for the fixed-height mode The background position does not work in fluid-height mode on outlook.com For better result we encourage you to use a background image width equal to the hero container width and always specify a fallback background color, in case the user email client does not support background images. Please keep the hero container height below the image height. When the hero container height - both in fixed or fluid modes - is greater than the background image height, we can’t guarantee a perfect rendering in all supported email clients

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

mjml-hero-content

Display some content in an mj-hero component

Use only one mj-hero-content component inside a mj-hero component

attribute	unit	description	default value
width	px/percent	content width	100%
align	left/center/right	horizontal alignment	center
background-color	color	content background color	transparent
padding	px	supports up to 4 parameters	0px
padding-top	px	top offset	0px
padding-right	px	right offset	0px
padding-left	px	left offset	0px
padding-bottom	px	bottom offset	0px
css-class	string	class name, added to the root HTML element created	n/a

1294c3cbdcc8be8c571685b6805f5ec918e429a4