# Title Group with Button and Filters

## Overview

![Title Group Editor view with all groups visible](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/EMaBitIgN1quEjCXSCf6/title1.png)

![Title Group with Category dropdown visible](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/hEQSwoblok8GSm0cBYqu/title2.png)

![Title Group with Toggle tabs visible](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/rcasuRguYGMweEg13TE3/title3.png)

![Title Group with Description/Results text visible](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/1agcagPrnxNPF1vPXZil/title4.png)

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://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/H8LMn5aYu0e7NHclVxkl/title5.png)

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://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/fmrvKpfUTu5lLgo9tA4t/title6.png)

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://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/YUHIwEOO4cYF1mkYzpQy/title8.png)

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