Title Group with Button and Filters

Overview

This block includes a title, dropdown, toggle tabs, description text, sort dropdown, filters, and a new button. This group should be used when you need to add a title group above a section of content.

How to adjust the "Sort", "Filter", and "New" options and responsive settings

By default, all title group elements contain the "Sort", "Filter", and "New" UI elements in a single group. If you won't be using all of those elements for a particular block, then it is best to follow these steps to ensure that everything is correctly aligned on desktop and mobile:

1. Delete the unused elements and re-size the Group Collapsible Sort Filter and Button group so that it doesn't contain any extra horizontal space within it

2. Expand the Group Inner header inputs element so that it touches the Group Collapsible Sort Filter and Button element.

3. Adjust the minimum width of the Group Inner header inputs element based on the number of elements that still remain in the Group Collapsible Sort Filter and Button element based on the values below:

  • 1 element (e.g., Sort only): 30% minimum width

  • 2 elements (e.g., Sort and Filter): 55% minimum width

  • 3 elements (no changes needed, since this is its default state)

Structure

  • When this block is added to a page, it is placed within a group called Blocks container 860 (do not rename) on the page. This group contains the responsive settings for all blocks.

  • Group HeaderWithButtonAndFilter group contains the title, add new button, and reusable element filters_template.

  • The dropdown, toggle tabs, and description/results text are within three separate collapsible groups. You can set any of those groups to be visible or not visible on page load.

Last updated