Hero Section Indigo
A hero section with a versatile full-width or content-width, graphical call to action with a unique overlay gradient.
Hero Section Indigo strongly emphasizes your opening call to action with an eye-catching graphical presentation that combines a background image with a unique gradient overlay.
There are a number of important and forward-thinking features of this section that you should be aware of:
- The gradient overlay is a combination of a gradient and a pseudo-element that extends the main gradient color to the left edge of the screen. This pseudo-element technique ensures that the content in the CTA is always perfectly aligned with the rest of the content on your site and allows the CTA to be used independently anywhere, whether in a section or not.
- The content in the CTA will never collide with the gradient edge because the width of the first gradient band and the width of the content container are synced together with the
--gradient-start-colorvariable controls the start color of the gradient as well as the pseudo-element color, making it easy to adjust colors from one point of control and ensuring that these colors always match to perfection.
--image-widthvariable on the CTA allows you to decide whether this frame should stop at the edge of your site’s content width or continue to full bleed. By default, it’s content width. But, by changing the
--image-widthvariable value to 100vw, you’ll instantly achieve full bleed.
- Since the background image starts at the left edge of your site’s content width (not the device’s left edge), more of the image is prioritized. On top of that, we’ve set the inline object position to 0% to prioritize the image content even further. This protects most of the image content as the device size scales down.
Have fun with this one!
No related components.
Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.