Also known as: selector, picker, card with dropdown
Description
A block with a dropdown selector which allows the user to select a topic and see more details about it appear on the page.
Design
Displays a dynamic card with a dropdown/select element. The card content below the dropdown updates as the user chooses a different select item. This block utilizes the Web 2.0 (and UX) principle of progressive disclosure, which means showing a little content at first and allowing the user to see more if they choose to interact with the block.
- The block behaves like a tab group to show different options (i.e. tabs) along with related details (i.e. tab panels).
- Variations:
- No background - the card will be light gray
- With a background - the card will be white
- Dimensional lines light background pattern - see second screenshot below
- Custom background pattern - upload an svg pattern to the WP media library and add it to the block
No background and a gray card
|
With light dimensional lines bg pattern
|
With custom bg pattern
|
Use Cases
- For displaying a large number of options (up to 15) with supporting content
- Example: Popular career pathways on the BBA Majors overview page
- For displaying a few options (at least 3) with varying amounts of supporting content
...