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 Heading with Paragraph(s)

Overview

This pattern provides a structured content block with a callout heading followed by multiple paragraphs. It's designed for long-form content with consistent spacing and typography, ideal for articles, blog posts, or detailed information sections.

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

The pattern consists of two main sections:

  1. Heading Group (1)

    • Callout-styled heading
  2. Paragraph Group (2)

    • Multiple paragraph blocks
    • 1.7 line height for readability

Common Tasks

Modifying the Heading:

  1. Click on the heading text
  2. Enter your new heading

Edit Heading Text

Edit a Paragraph:

  1. Click on a paragraph
  2. Remove the Lorem Ipsum and start typing new paragraph

Modifying a Paragraph

Adding a Paragraph:

  1. Select a "Paragraph" block
  2. Select Duplicate

Adding a Paragraph

Removing a Paragraph:

  1. Select the paragraph block
  2. Press Delete or click the three dots menu and select "Remove block"

Removing a Paragraph

Block Documentation

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

  • Heading Block
  • Paragraph Block
Contributors: ASpiteri-BCGov
Prev
DSWP Footer With Territorial Acknowledgement
Next
DSWP Horizontal Card No Shadow