Section with image and description

If you want to talk about a few topics that has images, it could be helpful to layout the content in an alternating fashion. In one section you can have image in the left with details on the right, and for next section you can reuse this component to put image on the right with details on the left. When viewed on a smaller screen, the content is structured to show image first followed with details.

Show details...

Syntax

{{< section-with-image-and-description
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-align-horizontal="Use left, center or right to align horizontally"
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-border-radius-small="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
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,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
sub-heading="Any text"
subheading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
truncate-length="Any number" >}}

The actual message goes here

{{< /section-with-image-and-description >}}

Samples

Cactus

Tough but beautiful

A cactus is a member of the plant family Cactaceae, a family comprising about 127 genera with some 1750 known species of the order Caryophyllales. The word cactus derives, through Latin, from the Ancient Greek word κάκτος (káktos), a name originally used by Theophrastus for a spiny plant whose identity is now not certain.

Life is like photography

Always look on the bright side of things

Photography is the art, application, and practice of creating durable images by recording light, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film. It is employed in many fields of science, manufacturing (e.g., photolithography), and business, as well as its more direct uses for art, film and video production, recreational purposes, …