Hero Section with Elegant Curved Shapes
A sleek and concise title highlighting the stylish curved shapes in the hero section design.
Syntax
{{< hero-section-with-background-and-content-4background-color="any background or gradient"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-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-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"button-border-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-border-width="Any valid number with unit like 10px or 10rem"button-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"button-padding="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-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"button-text-line-height="Any valid number with unit like 10px, 10rem or 50%"button-text-size="Any valid number with unit like 10px, 10rem or 50%"container-align-horizontal="Use left, center or right to align horizontally"content-background-color="any background or gradient"content-container-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"curve-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"heading="Any text"heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"heading-line-height="Any valid number with unit like 10px, 10rem or 50%"heading-size="Any valid number with unit like 10px, 10rem or 50%"height="Any valid number with unit like 10px, 100vh, 10rem or 50%"id="ID of any content in your website"image="Any valid image link"is-bottom-curved="true|false"is-full-width="true|false"is-open-in-new="true|false"is-top-curved="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-align-horizontal="Use left, right, center or justify to align text horizontally"text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"text-line-height="Any valid number with unit like 10px, 10rem or 50%"text-size="Any valid number with unit like 10px, 10rem or 50%" >}}
The actual message goes here
{{< /hero-section-with-background-and-content-4 >}}
Default Sample
Hot Air Balloons Over Brown Mountain
Hot air balloons gracefully drift over the rugged peaks of Brown Mountain, creating a breathtaking scene. The vibrant colors of the balloons contrast beautifully against the earthy tones of the mountain and the clear blue sky. As the sun rises or sets, the light dances on the landscape, adding a magical glow to the experience. This peaceful adventure offers stunning views, fresh air, and a sense of wonder. Whether you're soaring above or admiring from below, the sight of hot air balloons over Brown Mountain is unforgettable, capturing the beauty of nature and the thrill of floating in the open sky.
Explore Now