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 Horizontal Card No Shadow

Overview

This pattern creates a horizontal layout with content on the left and an image on the right, without box shadow effects. It's designed for clean, minimal presentations featuring a heading, subheading, and a list of links alongside an image.

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:

  1. Main heading - (H2, bold)

  2. Subheading - (H5)

  3. Linked list - (2.0 line height)

  4. Full-size image

Common Tasks

  1. Main Heading:

    • Click to edit the H2 heading
    • Maintains bold styling
    • Dark font color Heading editing
  2. Subheading:

    • Click to edit the H5 subheading
    • Maintains consistent styling Subheading editing
  3. Link List:

    • Click to edit list items
    • Update link URLs
    • Add or remove items as needed List editing

Image Replacement:

  1. Select the image block
  2. Click "Replace"
  3. Upload or choose a new image
  4. Image fills the column width Image replacement

Layout Considerations

  • Content appears on the left (60% width)
  • Image appears on the right (40% width)
  • Stacks vertically on mobile devices Responsive behavior

Block Documentation

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

  • Heading Block
  • List Block
  • Image Block
Contributors: ASpiteri-BCGov
Prev
DSWP Heading with Paragraph(s)
Next
DSWP Icon with Excerpt