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 Icon with Excerpt

Overview

This pattern creates a two-column layout featuring icon-heading combinations with accompanying text excerpts. It's ideal for presenting features, services, or key points in a visually balanced 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 Components

Each column contains:

  1. Icon

    • 36px width icon image
    • H5 heading
  2. Heading - Main title for the card

  3. Paragraph - Descriptive text

Common Tasks

Modifying Icon:

  1. Select the image block
  2. Click "Replace"
  3. Upload or choose new icon
  4. Icon automatically resizes to 36px width Icon replacement

Update Heading:

  • Click to edit H5 heading text
  • Start Typing new content

Heading update

Update Paragraph:

  • Click to edit paragraph text
  • Start Typing new content

Paragraph update

Layout Variations

  • Desktop: Two equal columns
  • Tablet: Maintains two columns
  • Mobile: Stacks vertically Layout Variations

Block Documentation

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

  • Image Block
  • Heading Block
  • Paragraph Block
Contributors: ASpiteri-BCGov
Prev
DSWP Horizontal Card No Shadow
Next
DSWP Hero Image with Title