Skip to content

Using patterns in layout builder

Stephen Mustgrave edited this page Aug 15, 2024 · 2 revisions

Perquisites

  • Layout builder

Example

For this example we are going to use fields to render an "Alert" component.

Before getting started we created a new content type "Layout Builder". Added 2 fields to it "Header" and "Content".

  1. While in layout builder, click "Add section". This will show all components are available layouts.
Screenshot 2024-08-06 at 2 42 29 PM
  1. Selecting "Alert" will show available props and variant options, in this example I show "Informative"
Screenshot 2024-08-06 at 2 42 57 PM
  1. After saving the layout you'll see 2 "Add block" sections that correspond to the 2 slots of the component, see https://git.drupalcode.org/project/ui_suite_uswds/-/blob/4.0.x/components/alert/alert.component.yml
Screenshot 2024-08-06 at 2 43 37 PM
  1. Adding "Header" to the first slot and "Content" to the 2nd.

  2. Go to https://drupal-govcon-2024-ui-patterns.ddev.site/node/15 to see an example page using the component.

Screenshot 2024-08-06 at 2 52 16 PM

Assignment

Using the same content type

  1. Add a new section, using Summary box.
  2. Add "Header" field to first slot.
  3. Add "Content" field to second slot.