# Title Group with Button and Filters

## Overview

![Title Group Editor view with all groups visible](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MW7pgDn7BcvGSjPV3Ei%2F-MW7xNA7QLMR-VnWEfm0%2Fimage.png?alt=media\&token=accc7f95-edb5-4404-99f3-ca3da47528d7)

![Title Group with Category dropdown visible](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MW7pgDn7BcvGSjPV3Ei%2F-MW7xiSaKzISeow4beEJ%2Fimage.png?alt=media\&token=955064ca-15fc-4a4c-a436-e130e318ca28)

![Title Group with Toggle tabs visible](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MW7pgDn7BcvGSjPV3Ei%2F-MW7xy3OPDvIaOkRGX78%2Fimage.png?alt=media\&token=3ba436b1-3bfa-4c8a-8ca2-3dcad41ec261)

![Title Group with Description/Results text visible  ](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MW7pgDn7BcvGSjPV3Ei%2F-MW7y8liflNBIgsp0uzO%2Fimage.png?alt=media\&token=57763be3-78e5-4c53-acc6-db39d761de95)

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

![Title Group Editor view with all groups visible](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MW7pgDn7BcvGSjPV3Ei%2F-MW7xNA7QLMR-VnWEfm0%2Fimage.png?alt=media\&token=accc7f95-edb5-4404-99f3-ca3da47528d7)

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

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MYw6hrLL-dKEUJzHJrb%2F-MYw6pB-_JN7rQh9hIF1%2Fimage.png?alt=media\&token=be0b45b9-a51f-4534-832d-4116569867de)

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

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MYvHnWJ1QNlvajWDOQ4%2F-MYw2iXSITs6pus_zp8e%2Fimage.png?alt=media\&token=0ca948a8-af91-47e4-8b12-56b6992a88e3)

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)

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MYvHnWJ1QNlvajWDOQ4%2F-MYw4XiVr3c5wbLAMyej%2FHeader-inputs.png?alt=media\&token=c21dbe9f-214c-4c69-888f-f94d62af65e9)

## 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**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/applyfilters).
* 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.