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:
- card-small: applies styles on card hover: scale up 1.01x
- card-light & card-dark: added as a hook for targeting styles as needed within patterns
- card-title: added as a hook for targeting styles as needed within patterns
Kadence Modification Notes
- Card container block
- Renamed to “Card Small Light” or “Card Small Dark”
- Vertical Gap: LG
- Padding: MD
- Light Cards on hover: background color #F5F5F5
- On Hover: box-shadow 0px 25px 50px -12px rgba(0, 0, 0, 0.25)
- Card title
- Font-size: 32px
- Line-height: 1.2
- Font-weight: 500
- Card description
- Font-size: SM
- Line-height: 1.5
- Font-weight: 400
- Letter-spacing: 0.32px
- Vertical gap between title & description: SM
- Large Secondary Button mini-pattern used within card variations, see documentation
- Button Width: Full
- Dark Cards: border 1px #3D3D3D
Pattern Library Organization
- Categories: Cards
- Search Keywords: small card, light card, dark card
- Individual mini-patterns:
- Card Small Light: Secondary Button
- Card Small Light: Chip & Secondary Button
- Card Small Dark: Secondary Button
- Card Small Dark: Chip & Secondary Button