DSWP Information Contact Socials

Overview

This pattern creates a bordered container with a header and a grid of contact/social information cards. Each card features an icon, heading, description, and link. It's ideal for contact pages, footer sections, or any area requiring organized contact information.

Pattern Components

The pattern consists of:

1. Header Section

   • Light gray-blue background
   • H4 heading

2. icon

   • 28px wide

3. Heading

   • H6 heading

4. Paragraph

   • 1.7 line height for readability

5. Link

Common Tasks

Header Modification:

1. Click to edit the H4 heading

Change Icon:

1. Select image block
2. Click "Replace"
3. Upload or select a 28px square icon (If you upload a larger size, it will scale down to 28px)

Modifying the Heading:

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

Modifying the Paragraph:

1. Click to edit paragraph text
2. Start Typing new content

Updating Link:

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

Layout Considerations

• Desktop: 2x2 grid
• Tablet: 2x2 grid maintained
• Mobile: Stacks to single column

Block Documentation

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

• Heading Block
• Image Block
• Paragraph Block