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 Card with Hyperlink List

Overview

This card-based layout pattern creates an organized grid of related items (services, features, or categories) with linked lists, providing clear navigation options while maintaining visual consistency across your WordPress site.

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. Image (optional) - Icons only, constrained to 60px × 60px
  2. Heading - Main title for the card
  3. Paragraph - Descriptive text
  4. List - Linked items
  5. Button - Call to action

Layout Options

This pattern supports 2, 3, or 4 card layouts. Choose the variation that best suits your content needs. Layout variations

Common Tasks

Adding the Pattern

  1. Click the plus button to add a new block
  2. Select "All" from the block menu
  3. Choose "dswp-card-with-hyperlink-list" pattern

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" Before and after adding a card

Block Documentation

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

  • Image Block
  • Heading Block
  • Paragraph Block
  • List Block
  • Button Block
Contributors: ASpiteri-BCGov
Next
DSWP Vertical Cards