Neurotic Pumpkin Murderer

    mjml-hero-anthill

    4.4.0-beta.2 • Public • Published

    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>

    try it live

    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>

    try it live

    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
    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

    Keywords

    none

    Install

    npm i mjml-hero-anthill

    Homepage

    mjml.io

    DownloadsWeekly Downloads

    0

    Version

    4.4.0-beta.2

    License

    MIT

    Unpacked Size

    21 kB

    Total Files

    4

    Last publish

    Collaborators

    • jofan