# Title Group with Button and Filters

## Overview

![Title Group Editor view with all groups visible](https://764814898-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYJWnUT3lUFQk1K9BCK-4064010863%2Fuploads%2FGj9zMIHtMjqIpm5PKPrH%2Ftitle1.png?alt=media\&token=fe719200-c4c4-49ca-884d-1d718fe8f59b)

![Title Group with Category dropdown visible](https://764814898-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYJWnUT3lUFQk1K9BCK-4064010863%2Fuploads%2Fcu26zQSpDNkK7Avr9N9j%2Ftitle2.png?alt=media\&token=b5c6199c-31cc-47c7-a7a7-6c73add7885f)

![Title Group with Toggle tabs visible](https://764814898-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYJWnUT3lUFQk1K9BCK-4064010863%2Fuploads%2FLi4NPBqN5mPKwwS7jiLh%2Ftitle3.png?alt=media\&token=12f037fd-b3a5-4b6a-815a-dd1623e82cf3)

![Title Group with Description/Results text visible](https://764814898-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYJWnUT3lUFQk1K9BCK-4064010863%2Fuploads%2FPXvk9oAp48qu7El95Hzs%2Ftitle4.png?alt=media\&token=d470acde-cc43-4e5f-a390-53b00dd6c1d2)

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://764814898-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYJWnUT3lUFQk1K9BCK-4064010863%2Fuploads%2FZmKJgZtWNRz3QtjKDCRD%2Ftitle5.png?alt=media\&token=fef457cf-b5f7-4ab9-8e16-822b62e62c76)

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://764814898-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYJWnUT3lUFQk1K9BCK-4064010863%2Fuploads%2FtNWBClGUgloJ1qspcli5%2Ftitle6.png?alt=media\&token=e50da05c-2a87-4155-b570-1ec1d9807240)

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)

![](https://764814898-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYJWnUT3lUFQk1K9BCK-4064010863%2Fuploads%2FQQnT0nEW5QcDH4pmp1rL%2Ftitle8.png?alt=media\&token=5e593674-20c4-4018-b851-820689af99d8)

## 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.