07 – Hero Image
    • 1 Minute to read
    • Dark
      Light

    07 – Hero Image

    • Dark
      Light

    Article summary

    Description

    The hero usually fills the opening screen and previously had few options other than bespoke builds. This block can now have a border and be rendered smaller. Another added benefit is the option to add an independent mobile-size image. Previously, if a landscape image was used for desktop, this rendered oddly when responding down into mobile view. If the hero is swapped for a 'squarer' image for mobile the viewing experience is greater.

    Default block view

    Desktop

    Mobile

    Formatting options

    Padding

    This refers to the space between the block's content and its border. This can be edited in the Details Tab.

    Option

    Details

    Default

    Padding




    Top

    0

    Right

    0

    Bottom

    0

    Left

    0

    Block Background Color

    Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions.

    Option

    Details

    Default

    Background Color

    Block Background Color

    #ffffff

    Mobile Hero Image

    Used to set an independent image for mobile view. First, upload the image to the Content Store and then apply the image URL to the input field in the Details Tab.

    Option

    Details

    Default

    Hero Image

    Mobile Image

    Blank

    Desktop Hero Image Link

    Used to add the desktop view image link.

    Option

    Details

    Default

    Image Link

    Desktop Hero Image Link

    Blank

    Mobile Hero Image Link

    Used to add the mobile view image link.

    Option

    Details

    Default

    Image Link

    Mobile Hero Image Link

    Blank

    Compatibility

    There are no known render issues with this block.


    Was this article helpful?