BCEW Monorepo Docs

Patterns Overview ​

All patterns are designed to be responsive, mobile-friendly, accessible, and optimized for performance. The goal is to allow you to easily drag and drop any number of these patterns in any order on a page without needing to modify any code or block settings—simply update the content and colors as needed. You should be able to create a multi-page site using any combination of these patterns, without the need to develop new ones.

If you're new to WordPress's Block Patterns, check out the WordPress's Block Patterns Guide

BC Gov Logo Light ​

This is an experimental pattern that is not yet ready for use.

Horizontal Card with Large Image ​

Full-width layout with flexible content area and optional button component.

Standard layout: Horizontal Card with Large Image

Example implementation: Example Horizontal Card

Variation Example right: Example Horizontal Card

Vertical Cards ​

Flexible card layout that supports both images and icons.

Standard layout: Vertical Cards

Example implementation: Example Vertical Cards

Hero Image with Title ​

Main banner images with text overlay

Standard hero banner: Hero Image with Title Pattern

Example implementation: Example Hero Image with Title Pattern

Secondary Hero ​

Smaller banner sections with compact layout

Standard layout: Secondary Hero Pattern

Example implementation: Example Secondary Hero

Heading with Paragraphs ​

Text content with styled heading

Standard layout: Heading with Paragraphs Pattern

Image & Text ​

Image and text content blocks with flexible layout options

Standard layout: Image & Text Pattern

Example implementation: Image & Text Pattern

Variation Example right: Image & Text Pattern

Team Pattern ​

Staff and team member displays with contact information

Standard layout: Team Pattern

Example implementation: Example Team Pattern

Information Contact Socials ​

Contact information

Standard layout: Information Contact Socials Pattern

Example implementation: Information Contact Socials Pattern

Icon with Excerpt ​

Short content blocks with icons

Standard layout: Icon with Excerpt Pattern

Example implementation: Icon with Excerpt Pattern

Card layout with icon and title at the top

Standard layout: Card with Hyperlink List Pattern

Example implementation: Icon with Excerpt Pattern

Best Practices ​

  1. Pattern Selection

    • Choose patterns based on content type
    • Maintain consistency across pages
    • Consider mobile responsiveness (How patterns look on mobile devices when stacked on top of each other)

  2. Content Population

    • Replace all placeholder text
    • Use appropriate image sizes

  3. Accessibility

  4. Performance

    • Optimize images before upload
    • Don't overload pages with patterns
    • Consider load times