Download Plugin

Card Block

Written by

in

Overview

The Card Block creates attractive, self-contained content cards perfect for features, team members, products, blog posts, and more. Cards include support for images, headings, text, buttons, and flexible styling options with multiple preset layouts.

Key Features

  • Multiple Layouts: Vertical, horizontal, and overlay card styles
  • Image Support: Featured images with various aspect ratios
  • Flexible Content: Headings, text, buttons, and custom blocks
  • Hover Effects: Built-in animations and transforms
  • Link Wrapper: Make entire card clickable
  • Badge Support: Add labels or categories
  • Shadow & Border: Customizable styling options

How to Use

  1. Add the Card block
  2. Choose a card layout (vertical, horizontal, overlay)
  3. Upload or select a featured image
  4. Add heading, text, and button content
  5. Customize colors, spacing, and effects
  6. Optionally make card clickable with link
  7. Preview and publish

Card Layouts

Vertical Layout

Image on top, content below – best for product cards, blog posts, team members

  • Image spans full width
  • Content stacks vertically
  • Ideal for grid displays
  • Works great on mobile

Horizontal Layout

Image on left/right, content beside – best for features, testimonials

  • Image and content side-by-side
  • Good for detailed content
  • Adjustable image width ratio
  • Stacks on mobile

Overlay Layout

Content overlays image – best for hero cards, featured content

  • Text appears over image
  • Gradient overlay for readability
  • Dramatic visual impact
  • Great for calls-to-action

Block Settings

Layout Options

  • Card Style: Vertical, horizontal, or overlay
  • Image Position: Top, left, right (for horizontal)
  • Image Aspect Ratio: 16:9, 4:3, 1:1, or custom
  • Content Alignment: Left, center, or right

Style Settings

  • Background Color: Card background
  • Border: Width, color, and radius
  • Shadow: None, small, medium, large
  • Padding: Internal spacing

Image Settings

  • Featured Image: Upload or select image
  • Image Fit: Cover, contain, or fill
  • Image Overlay: Add gradient or color overlay
  • Focal Point: Control image cropping

Link Settings

  • Make Card Clickable: Enable link wrapper
  • Link URL: Destination URL
  • Open in New Tab: External link behavior
  • Rel Attributes: nofollow, sponsored, etc.

Common Use Cases

  • Product Cards: E-commerce product displays with image, name, price, add to cart
  • Team Members: Photos, names, roles, bios, social links
  • Blog Posts: Featured image, title, excerpt, read more button
  • Features: Icon/image, heading, description for product features
  • Testimonials: Customer photo, quote, name, company
  • Services: Service icon, name, description, learn more link
  • Portfolio Items: Project images with overlay titles
  • Pricing Plans: Plan features with CTA buttons

Best Practices

  • Use consistent card styles across similar content types
  • Optimize images to same aspect ratio for uniform grids
  • Keep content concise – cards work best with brief text
  • Use hover effects subtly (small scale or shadow change)
  • Ensure sufficient color contrast for text readability
  • Make entire card clickable for better UX
  • Use Grid or Row blocks to display multiple cards
  • Add appropriate spacing between cards (20-30px gap)

Card Grids

Display multiple cards using Grid Container:

  1. Add Grid Container block
  2. Set columns: 3 (desktop), 2 (tablet), 1 (mobile)
  3. Add Card blocks inside grid
  4. Set consistent gap (24-32px)
  5. Ensure all cards have same layout style

Hover Effects

  • Subtle Scale: transform: scale(1.02) on hover
  • Shadow Lift: Increase shadow on hover
  • Image Zoom: Scale image inside card
  • Border Highlight: Change border color
  • Overlay Fade: Reduce overlay opacity

Accessibility

  • Use proper heading levels (h2, h3) for card titles
  • Add alt text to all card images
  • Ensure clickable cards have descriptive ARIA labels
  • Maintain color contrast (4.5:1 minimum)
  • Make cards keyboard accessible (Tab navigation)
  • Provide focus states for interactive elements

Troubleshooting

  • Images different sizes: Set consistent aspect ratio in settings
  • Cards uneven height: Use CSS min-height or equal content length
  • Text not readable on overlay: Increase overlay opacity or use gradient
  • Hover effect not working: Check if card is clickable, verify CSS
  • Mobile layout broken: Ensure horizontal cards stack on mobile
  • Link not working: Verify URL format, check clickable setting

More posts