Skip to main content
Home
Anthony Media

Main navigation

  • Home
  • Build a Block
  • Contact

Breadcrumb

  1. Home
  2. Build a Basic Custom Block Component to Use in Layout Builder

A Common Component Pattern

Here's an example of a common component pattern:

component pattern example

A variation:

component pattern example

And mobile:

component pattern example

When you study content patterns in components, you'll likely find that many components contain the same four fields:

  • Heading (h2-h6 tags)
  • Text
  • Button (Link)
  • Media (Icon, Image, or Video)

Common components containing this pattern include:

  • Banners
  • Cards
  • Text and Media
  • CTA (Call to Action)

While the fields are the same in each component, the arrangement of the fields change. This is where templates come into play.

To design components, we incorporate the principles of Atomic Design by Brad Frost. Once designed, we start  building the atomic elements that will be added to the component. Components are then added through Layout Builder to build out a page.

Book traversal links for A Common Component Pattern

  • Build a Basic Custom Block Component to Use in Layout Builder
  • Up
  • Set Up Your Toolkit

Book navigation

  • A Common Component Pattern
  • Set Up Your Toolkit
  • Create a Landing page Content Type
  • Build a "Text with Media" Component
  • Theming
Powered by Drupal