---
title: <file_title>
tags: UI reference
---

[//]: # (Read carefully all comments)
[//]: # (Replace text wrapped in angle brackets <replace_text_formatted_like_this>)
[//]: # (All components, elements, values... should be formatted as code)
[//]: # (The first part of the file doesn't support eDocs flavour. Everything must be in plain text. Eg. notes cannot be formatted with the :::tip syntax type. Just use the eDocs flavour in the second part)

[//]: # (FIRST PART. CODE DATA EXTRACTION)
# <Component_name>

[//]: # (Enter here the component description)

[//]: # (Include note in plain text indicating the required backend service should be added. E.g. The QuerySignals services must be implemented.)

## Props
[//]: # (If there're no props, replace the section content with "None")

[//]: # (Prop name, type, and default value should be formatted as code. If a prop is required, refer it in italics before the description. Ie: *Required*. Button content with a message)
| Name | Description | Type | Default |
| --------- | ----------- | ---- | ------- |
| | | | |
| | | | |

## Slots

[//]: # (If there're no slots, replace the section content with "None")
[//]: # (If a slot or binding is required, refer it in italics before the description. Ie: *Required*. Button content with a message)
[//]: # (The Bindings column includes in the following order: the binding name in bold but not code format, type with code format, and description. If a slot has more than one bindings, make sure that they are documented in the same cell separated with line breaks)
| Slot name | Description | Bindings <br/> (name - type - description) |
| ---- | ----------- | -------- |
| | | |
| | | |

## Dynamic classes

[//]: # (Optional section! Enter here a description)

[//]: # (SECOND PART. DOC TAG RELATED INFORMATION)
## Events

[//]: # (If there're no events, replace the section content with "None")

This component emits the following events:
* <event_name>
* <event_name>

## See it in action

[//]: # (Warning note here indicating the required backend service should be added. E.g. The QuerySignals services must be implemented.)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_

[//]: # (Enter basic live example that relates with the definition or description of the component)

#### Play with props

[//]: # (Optional section. Only when there are props available and documented)

[//]: # (Include here an explanation of the example)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_

[//]: # (Enter prop live example)

#### Play with <slot_#1> slot

[//]: # (Optional section. Only when there are slots available and documented)

[//]: # (Enter here example explanation)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_

[//]: # (Enter slot live example)

#### Play with <slot_#2> slot

[//]: # (Optional section. Only when there are slots available and documented)

[//]: # (Enter here slot explanation)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_

[//]: # (Enter slot live example)

#### Play with events

[//]: # (Optional section. Only when there are slots available and documented)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_

[//]: # (Enter event live example)

## Extending the component

[//]: # (Optional section! Enter here description)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_