Compare

Syntax

{{< compare-container
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-left="Any text"
heading-right="Any text"
is-full-width="true|false"
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."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< compare-item
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-background-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-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."
button-font-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-hover-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-hover-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-left-order="Any number"
button-link-left="Any valid http link"
button-link-right="Any valid http link"
button-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-right-order="Any number"
button-text-left="Any text"
button-text-right="Any text"
group-title-text="Any text"
image-align-horizontal="Use left, center or right to align horizontally"
image-heading-left="Any valid image link"
image-heading-left-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image-heading-right="Any valid image link"
image-heading-right-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image-item-left="Any valid image link"
image-item-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."
image-item-right="Any valid image link"
is-bold-text="true|false"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
left-anchor-text="Any text"
link-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
link-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
link-left="Any valid http link"
link-left-order="Any number"
link-right="Any valid http link"
link-right-order="Any number"
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."
right-anchor-text="Any text"
sub-heading-left="Any text"
sub-heading-right="Any text"
subheading-left-order="Any number"
subheading-right-order="Any number"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-left="Any text"
text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text-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."
text-right="Any text"
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< /compare-container >}}

Samples