Using patterns in layout builder

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.

2. Selecting "Alert" will show available props and variant options, in this example I show "Informative"

3. 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

4. Adding "Header" to the first slot and "Content" to the 2nd.

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

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.