CTA Indigo

CTA Indigo strongly emphasizes your 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 frame 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 --safe-area variable.
• The --gradient-start-color variable 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.
• The --image-width variable 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-width variable 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!