Using patterns in a block
A new feature of UI Patterns 2.x is the ability to utilize patterns/components directly with Drupal's block interface.
In this example we are going to create a block component creating a hero banner. See https://designsystem.digital.gov/templates/landing/ for example.
Starting on the Block layout page, select the region to place your block in. In this example we are going to place into the "hero" region.
- Clicking "Place block" we can see that all site components are available as individual items.
- Select "Hero" component
- The next form that loads will show all the slots and properties of the component. See https://git.drupalcode.org/project/ui_suite_uswds/-/blob/4.0.x/components/hero/hero.component.yml for reference.
- For this example we will use static test, so in the "Title" and "Body" field select "Wysiwyg" option and add some text.
-
For hero banner image added https://federalist-3b6ba08e-0df4-44c9-ac73-6fc193b0e19c.sites.pages.cloud.gov/preview/uswds/uswds/develop/hero.jpg
-
In this example I configured the block to only appear on /hero-banner-example page, which has been pre-created. So go to https://drupal-govcon-2024-ui-patterns.ddev.site/hero-banner-example and see the hero banner.
- Create a "Summary box" component block
- Place in the "Content" region on the same page as the hero banner.