Design System WordPress Theme
Home
Github
Home
Github
  • Site Editor

    • Patterns

      • How to use patterns
        • DSWP Card With Hyper Link List
        • DSWP Vertical Cards
        • DSWP Default Heading
        • DSWP Footer With Territorial Acknowledgement
        • DSWP Heading with Paragraph(s)
        • DSWP Horizontal Card No Shadow
        • DSWP Icon with Excerpt
        • DSWP Hero Image with Title
        • DSWP Horizontal Card
        • DSWP Horizontal Card Large Image Left
        • DSWP Horizontal Card Large Image Right
        • DSWP Image And Text
        • DSWP Image And Text Flipped
        • DSWP Information Contact Socials
        • DSWP Link With Arrow
        • DSWP Secondary Hero Image With Title
        • DSWP Team Pattern
        • DSWP Vertical Cards With Icon
      • Patterns Overview
  • Developers

    • Patterns Troubleshooting
    • Template Parts

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.

Important Note

Each pattern consists of several blocks. Only adjust the content and color block settings. The structural settings (padding and margins) are pre-configured for responsiveness. Modifying structural settings may break the pattern.

Pattern Components

Pattern Card

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. Layout variations

Common Tasks

Modifying Cards

To Remove a Card:

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

To Add a Card:

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

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
Contributors: ASpiteri-BCGov
Prev
DSWP Card With Hyper Link List
Next
DSWP Default Heading