Compare

Compare

Show details...

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-alignment-horizontal="Any valid image link"
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%" >}}

The actual message goes here

{{< /compare-item >}}

{{< /compare-container >}}

Samples

What's the difference between Cupcake and Muffin?

Both are tasty, of course! But there is still a difference and this comparison should help clarify the differences.

Cupcake

Muffin

image
image

Has Frosting

No Frosting

Summary

17.00cm

17.00cm

(6.7”) Super Retina XDR display

(6.7”) Super Retina XDR display

ProMotion technology

ProMotion technology

Always-On display

Always-On display

Dynamic Island

image

Dynamic Island

A new way to interact with iPhone

A new way to interact with iPhone

Emergency SOS

image

Emergency SOS

Crash Detection

Crash Detection

6x

6x

Optical zoom range

Optical zoom range

Up to 29 hours video playback

image

Up to 29 hours video playback

Face ID

image

Face ID

Capacity

128GB

128GB

256GB

256GB

1TB

1TB

Display

Super Retina XDR display

Super Retina XDR display

17.00 cm / 6.7-inch (diagonal)

17.00 cm / 6.7-inch (diagonal)

Dynamic Island

Dynamic Island