Compare
Compare
Syntax
{{< compare-containerbackground-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-itemborder-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
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


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

Dynamic Island
A new way to interact with iPhone
A new way to interact with iPhone

Emergency SOS

Emergency SOS
Crash Detection
Crash Detection
6x
6x
Optical zoom range
Optical zoom range

Up to 29 hours video playback

Up to 29 hours video playback

Face ID

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