Version: 1.0.0 Category: Design Keywords: card, content, image, cta, pricing, feature

The Card Block displays content in a structured card layout with image, badge, title, subtitle, body text, and CTA button. Perfect for showcasing pricing plans, features, services, team members, and product listings.

Key Features:

• 6 layout presets (standard, horizontal, background, minimal, featured)
• Image management with aspect ratios and focal point
• Customizable badge (floating or inline)
• Built-in CTA area with Icon Button support
• 5 visual styles (default, outlined, filled, shadow, minimal)
• Full WordPress Block Supports (color, typography, spacing, border)

1. Insert the Card block into your page.
2. Add an image using the Media Library.
3. Fill in title, subtitle, and body text.
4. Customize the CTA button in the card footer.
5. Choose a layout preset and visual style in the settings.

• Standard: Image on top, content below (classic card)
• Horizontal Left: Image on left, content on right
• Horizontal Right: Image on right, content on left
• Background: Image as background with overlay
• Minimal: Clean layout with minimal styling
• Featured: Emphasized design for hero content

• Aspect Ratio: 16:9, 4:3, 1:1, Original, or Custom
• Object Fit: Cover (default), Contain, Fill, Scale Down
• Focal Point: Click to set precise image focus area

• Text: Short label (e.g., "New", "Sale", "Featured")
• Style: Floating (overlays image) or Inline (in content)
• Position (Floating): Top/Bottom Left/Right corners
• Position (Inline): Above or Below title
• Colors: Custom background and text colors

• Default: Standard card appearance
• Outlined: Border emphasis (2px border)
• Filled: Full background color
• Shadow: Elevated appearance with box shadow
• Minimal: No borders or backgrounds

Toggle any section on/off:

• Show/Hide Image
• Show/Hide Title
• Show/Hide Subtitle
• Show/Hide Body Text
• Show/Hide Badge
• Show/Hide CTA

• Content Alignment: Left, Center, Right
• Colors: Background, text, gradients via Block Supports
• Spacing: Padding, margin, block gap
• Border: Radius, width, style, custom color
• Shadow: WordPress shadow presets

Use Standard layout + Outlined style. Title for pricing tier, body for features list, CTA for "Get Started".

Use Minimal layout + 1:1 image ratio. Add photo, name as title, role as subtitle, short bio as body.

Use Horizontal Left + Shadow style. Feature icon/image on left, title, description, "Learn More" link.

Use Background layout with overlay. Add compelling headline and CTA for landing page heroes.

DO:

• Use consistent aspect ratios across multiple cards
• Keep titles concise (3-7 words)
• Provide descriptive alt text for all images
• Test color contrast on overlays and backgrounds

DON'T:

• Mix too many layout presets on the same page
• Use low-quality or pixelated images
• Overcrowd cards with excessive text
• Forget to add CTA links

• Alt Text: Always provide descriptive alt text for images
• Semantic HTML: Uses proper heading hierarchy
• Keyboard Navigation: All interactive elements are keyboard accessible
• Color Contrast: Ensure WCAG AA contrast ratios for text on backgrounds/overlays

Auto-generated from docs/blocks/CARD.md. To update, edit the source file and changes will sync on next push to main.