Mini-Pattern: Card Medium

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-medium: applies styles on card hover: scale up 1.01x and link button fill
• 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 Medium Light” or “Card Medium Dark”
  • Vertical Gap: MD
  • Padding: XL
  • Min-height: 520px (desktop & tablet, unset for mobile)
  • Light Cards: border 1px #969696
  • On Hover: box-shadow 0px 25px 50px -12px rgba(0, 0, 0, 0.25)
• Card title
  • Font-size: 2XL
  • Line-height: 1.1
  • Font-weight: 500
• Card description
  • Font-size: MD
  • Line-height: 1.4
  • Font-weight: 400
  • Letter-spacing: 0.2px
• Vertical gap between title & description blocks: MD
• Large Button mini-patterns used within card variations, see documentation
  • Primary Button
  • Secondary Button
  • Link Button

Pattern Library Organization

• Categories: Cards
• Search Keywords: medium card, light card, dark card
• Individual mini-patterns:
  • Card Medium Light: Primary Button
  • Card Medium Light: Secondary Button
  • Card Medium Light: Link Button
  • Card Medium Dark: Primary Button
  • Card Medium Dark: Secondary Button
  • Card Medium Dark: Link Button