Product Hero

Wow your readers with a great introduction to your articles.

link Block Names

t2/product-hero

link Style properties

• • The top and bottom padding inside the block (vertical space between the block edge and the block content).

  • --t2-product-hero-padding-block
  • Theme.json: wp.custom.t2-product-hero.padding-block
  • Default: 4rem

• • The block vertical space, when the block has a background color.

  • --t2-product-hero-padding-block-bg
  • Theme.json: wp.custom.t2-product-hero.padding-block-bg
  • Default: 4rem

• • The block minimum height.

  • --t2-product-hero-min-height
  • Theme.json: wp.custom.t2-product-hero.min-height
  • Default: 40vh

• • The gap between the block content elements.

  • --t2-product-hero-content-gap
  • Theme.json: wp.custom.t2-product-hero.content-gap
  • Default: 2rem

• • The left offset of the main media, when there is a secondary media used.

  • --t2-product-hero-media-gap
  • Theme.json: wp.custom.t2-product-hero.media-gap
  • Default: 4rem

• • Specifies the distance media elements will slide to get to the final position. Positive values move the media from right to left, negative values move the media from left to right. Set to 0px for no animation.

  • --t2-product-hero-media-shift
  • Theme.json: wp.custom.t2-product-hero.media-shift
  • Default: 10vw

• • The top offset of the secondary media, relative to the main media

  • --t2-product-hero-media-diff
  • Theme.json: wp.custom.t2-product-hero.media-diff
  • Default: 3rem