Hero section where image fades into content section

This section is suitable to be a hero section and is highly customizable. It is designed so that there is no sharp line between text and image section. The trick here is to take the background of the text section and apply that as a linear gradient so that the image gradually fades in. You can use this section without image and flip the image and content as well.

Show Full Syntax...

Syntax

{{< section-with-title-subtitle-link
background-color="any background or gradient"
button-background-color="any background or gradient"
button-background-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
gradient-angle="Any number"
gradient-length="Any number"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
is-flipped="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-alignment="Any text"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /section-with-title-subtitle-link >}}

Default Sample

Other Samples