DSWP Vertical Cards

Overview

This pattern creates a responsive grid of vertical cards, each containing an image, heading, description, and a linked call-to-action. It's ideal for showcasing services, features, or content categories in a visually consistent format.

Pattern Components

Each card consists of the following blocks (numbers correspond to the image above):

1. Featured Image - Full-width image (250px height, object-fit: cover)
2. Heading - Card title (H5)
3. Description - Body text
4. Link - Call-to-action

Layout Options

The pattern supports 2, 3, or 4 column layouts. Cards automatically stack on mobile devices for optimal readability.

Common Tasks

Modifying Cards

To Remove a Card:

1. Click the ellipses (⋮) next to the card you want to remove
2. Select "Delete"

To Add a Card:

1. Click the ellipses (⋮) next to any existing card
2. Select "Duplicate"

Customizing Elements

Example: Changing the image

1. Click on the existing image
2. Select "Replace"
3. Upload or choose a new image
4. The image will automatically resize to fit the card dimensions

Block Documentation

For detailed instructions on modifying specific blocks, refer to WordPress's official documentation:

• Image Block
• Heading Block
• Paragraph Block
• Link Block