Using patterns as Field Formatter

Example

In this example we are going to use a field formatter to turn a "body" field into a USWDS Summary box https://designsystem.digital.gov/components/summary-box/.

1. Go to the view display we are going to use the formatter on, example admin/structure/types/manage/article/display
2. For "Body" select "Component (per item).

3. Then in the formatter settings select "Summary box" which will show the props/slots for this component.
4. Filling in the slots with the field options of a "Body" field, see below

5. Save everything/
6. Go to https://drupal-govcon-2024-ui-patterns.ddev.site/node/13
7. See how the body field is rendering as a summary box.