Using patterns in a view

Example

In this example we are going to use views to create a USWDS accordion group. See https://designsystem.digital.gov/components/accordion/ for options available.

Starting with a default view page, preconfigured to filter by "Articles"

1. For this example we want to use fields vs content display. So change the "Show" setting under Format from "Content" to "Fields"
2. Add "Title" and "body" fields

3. Change the format from "Unformatted List" to "Component (UI Patterns)"

4. Here we need to select "Accordion". Since this determines what the wrapper around the rows are we need the accordion and rows will be "Accordion item". Should see the follow page.

5. "Content" is the slot available to the "Accordion" pattern, see accordion.component.yml. For this example add "Content: View rows" under the Content slot.

6. Now we need to pass the rows into the "Accordion item" pattern. Under Format change "Show" from "Fields" to "Component (UI Patterns)".

7. Select "(Accordion item)". Now there will be 2 slots for this pattern "Title" and "Content". Under each slot select "View field" and select title/body for the respective slot. See

8. Save everything!
9. Preview is still a work in progress so go to the page URL https://drupal-govcon-2024-ui-patterns.ddev.site/ui-pattern-view-example

Congratulations! Just made an accordion without having to write any code!.

Assignment

In the same view

1. Create a new page
2. Instead of accordions make a USWDS Process List