DSWP Vertical Cards With Icon

Overview

This pattern creates a grid of vertical cards, each featuring an icon, heading, and a list of links. The cards have a distinctive gold top border and light gray background (both which can be changed), with a consistent layout and spacing.

Important Note

The structural settings (padding, margins, borders) are pre-configured for responsiveness. Only modify content and colors to maintain design consistency.

Pattern Components

Each card contains:

1. Container

   • 1px border (dswp-surface-color-border-default)
   • 7px border radius
   • Light gray background
   • 9px gold top border

2. Icon Section

   • Square image (256px)
   • Light gray background

3. Heading Section

   • H5 heading (xx-large font size)

4. Links Section

   • Three linked items (default, can add more)

Common Tasks

Modifying border color

1. Click on the heading text
2. Type your new heading
3. The styling will automatically apply

Icon Replacement

1. Select the image block
2. Click "Replace"
3. Upload or select image

Modifying the Heading

1. Click on the heading text
2. Type your new heading
3. The styling will automatically apply

Updating Link

1. Select the link text
2. Update URL and text as needed

To Add a Card

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

Removing a card

1. Click the ellipses (⋮) next to any card (see gif below)
2. Select "Delete"

Layout

• Desktop: 3x2 grid
• Mobile: Single column

Block Documentation

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

• Image Block
• Heading Block
• Paragraph Block