Image compare

Compare two images with a dividing slider

link Block names

t2/image-compare

link Style properties

• • Background color of the caption

  • --t2-image-compare-color-caption-background
  • Theme.json: wp.custom.t2-image-compare.color.caption-background
  • Default: hsla(0,

• • Caption padding

  • --t2-image-compare-spacing-caption-padding
  • Theme.json: wp.custom.t2-image-compare.spacing.caption-padding
  • Default: 0.25rem

• • Caption font size

  • --t2-image-compare-typography-caption-font-size
  • Theme.json: wp.custom.t2-image-compare.typography.caption-font-size
  • Default: 0.8125em

• • Gap between image and caption

  • --t2-image-compare-caption-gap
  • Theme.json: wp.custom.t2-image-compare.caption.gap
  • Default: --wp--preset--spacing--30

• • Background color of the handle

  • --t2-image-compare-color-handle-background
  • Theme.json: wp.custom.t2-image-compare.color.handle-background
  • Default: hsla(0,

• • Handle border

  • --t2-image-compare-handle-border
  • Theme.json: wp.custom.t2-image-compare.handle-border
  • Default: 2px

• • Handle border radius

  • --t2-image-compare-handle-border-radius
  • Theme.json: wp.custom.t2-image-compare.handle-border-radius
  • Default: 50%