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.

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