Building with Drupal 11 Canvas: How to Create a Custom Hero Component Using SDCs

In his blog post “Building with Drupal 11 Canvas: Creating a Custom Hero Component,” George Bonnici explores Drupal 11’s new Canvas visual builder and demonstrates how developers can create reusable, production-ready components using Single Directory Components (SDCs). He explains the installation of the Canvas module via Composer, the crucial configuration settings for component discovery, and how Drupal seamlessly integrates Canvas for a flexible, performance-optimised page-building experience.

George provides a hands-on walkthrough for building a Hero section—from defining metadata hero.component.yml to creating a Twig template and responsive CSS. The guide highlights best practices like semantic HTML, BEM-based styling, and variant creation for adaptability. With Canvas, Drupal 11 empowers both developers and site builders to visually assemble pages while maintaining consistency, reusability, and performance.