Pattern Documentation
Theme Modifiers (CSS, Javascript)
This pattern styling is affected by modifiers; see the Kadence Build Strategy Documentation.
Here are the classes that affect this pattern:
- jumbo-callout: Applies styles to flip color palette on mouse over pattern from light to dark and vice versa. Disables card box-shadow until mouse over pattern, then box-shadow per block settings is enabled.
Kadence Modification Notes
- Container block
- Renamed “Jumbo Callout Dark/Light”
- Padding top/bottom set w/ manually entered px values:
- Desktop 180px
- Tablet 4XL
- Mobile 80px
- Layout for columns is set via max-width on Heading block and Card Small container block
- Heading block font size set w/ manually entered px values:
- Desktop 118px
- Tablet 80px
- Mobile 58px
- Card Container Block
- Box Shadow: 0px 0px 240px 0px #796dfd
- Box Shadow block settings must be applied on “normal” not “hover” state
- Card Small CTA
- Utilizes the small card mini-pattern, see documentation
- Deviations from base card pattern:
- Card container padding- Desktop XL, Tablet & below MD
- Card title font-size: LG
Pattern Library Organization
- Categories: n/a
- Search Keywords: callout, jumbo callout