> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas-pages-and-modules/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas-pages-and-modules/modules/title-group-with-button-and-filters.md).

# Title Group with Button and Filters

## Overview

![Title Group Editor view with all groups visible](/files/-MW7xNA7QLMR-VnWEfm0)

![Title Group with Category dropdown visible](/files/-MW7xiSaKzISeow4beEJ)

![Title Group with Toggle tabs visible](/files/-MW7xy3OPDvIaOkRGX78)

![Title Group with Description/Results text visible  ](/files/-MW7y8liflNBIgsp0uzO)

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](/files/-MW7xNA7QLMR-VnWEfm0)

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

![](/files/-MYw6pB-_JN7rQh9hIF1)

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

![](/files/-MYw2iXSITs6pus_zp8e)

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)

![](/files/-MYw4XiVr3c5wbLAMyej)

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