Using the Hero Component

One of the options when creating modals and slideouts is the "hero" component. On a landing page, a hero is a large, bold headline image and text that helps make an important point.

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 puts 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:  http://colorfulgradients.tumblr.com/

2. Use landscape over portrait images

Modals and slideouts look best when they're not too elongated. If you upload an image that is super tall, the hero component will crop it so that it doesn't overflow.

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

Still need help? Contact Us Contact Us