Using the Hero Component

One available option when creating your Modals and Slideouts, is the "hero" component. On a landing page a hero is a large, captivating headline image (often, but not always with a bold header overlaid), that relates to the text beneath.

In an Appcues element, the hero is similar to an normal image, but it will span the full length of its container, with no margins on the right, left or top. Here's an example using the same photo, of how a hero (top - shown with no text) and an image (bottom) differ in a modal:

When adding a hero to your modals and slideouts, you may want to keep these things in mind to help them look great:

1. Use images with a single dominant color or gradient

The hero component allows you to add text over your uploaded image, so having a colorful backdrop really helps. If you are looking for images, this free library of colorful gradients is a great resource:


2. Images scale to fit the total space

The ideal width for a hero image is 650px. In order to work responsively and be flexible enough for a variety of image types, the hero component will crop your image in certain conditions. In technical terms, it uses the CSS background-size property "cover" to ensure that 100% of the available space is covered by your image. The image below demonstrates what that means:

In the above example, we see that in the top ("background-size: cover") example, the bottom of the Golden Gate Bridge is cut off to fill the whitespace that would normally be there if "background-size: contain" were set. Here are a few examples of how the size of the modal or slideout will change with the amount of text you add to it:

In each of these examples, more of the blue and green in the corners is revealed as the image is resized.


3. Modify the height when needed

Generally speaking, Modals and Slideouts look best when they're not too tall. As shown in the above example, by default the hero component will crop tall images, so we tend to suggest that people use landscape images instead of portrait images. However, if its still cut off, you can modify the height (and/or zoom) using the sizing options in the editor.

Create something cool? We want to hear about it, let us know at support@appcues and your content could get featured on  ReallyGoodUX!