Image compare

Compare two images with a dividing slider

link Block names

t2/image-compare

link Style properties

• • Color of the figcaption

  • --t2-image-compare-color-figcaption-text
  • Theme.json: wp.custom.t2-image-compare.color.figcaption-text
  • Default: #555

• • Figcaption font size

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

• • Figcaption margin

  • --t2-image-compare-spacing-figcaption-margin
  • Theme.json: wp.custom.t2-image-compare.spacing.figcaption-margin
  • Default: 0.5em

• • 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: 1rem

• • 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%