# An example component

For this example, let's take the [Bootstrap Accordion component](https://getbootstrap.com/docs/5.3/components/accordion/), check the code, and learn one line at a time.

You can find the [Accordion component in the Radix theme here](https://git.drupalcode.org/project/radix/-/tree/6.0.x/components/accordion?ref_type=heads), we will share some snippets below as we move along:

The first thing to do before working with a component that you are not familiar with is to check its [README](https://git.drupalcode.org/project/radix/-/blob/6.0.x/components/accordion/README.md?ref_type=heads) file, it's always within the same directory, and it usually comes with a ***Usage*** section, something similar to this:

```twig
{% include 'radix:accordion' with {
  title: 'Yolo!',
  title_tag: 'h2',
  items: [
    {
      title: 'Item 1',
      title_tag: 'h3',
      content: 'Content 1',
    },
    {
      title: 'Item 2',
      title_tag: 'h3',
      content: 'Content 2',
    },
    {
      title: 'Item 3',
      title_tag: 'h3',
      content: 'Content 3',
    },
  ],
  flush: true,
} %}
```

Looking at the code above and considering the Bootstrap documentation for the Accordion block, we've used an array of items to pass what would be in the "Accordion Set" here, so each accordion item is an object itself

Another helpful place to learn what are the options that we can pass along with the `include` in this example is to look into the `twig` file itself and check the comment block on top:

```twig
/**
 * @file
 * Accordion component.
 *
 * Bootstrap Documentation
 * https://getbootstrap.com/docs/5.3/components/accordion/
 *
 * Full List Utility Classes
 * https://github.com/twbs/bootstrap/blob/v5.3.0/dist/css/bootstrap.css#L214
 *
 * Available properties:
 * - title (string) (default: '')
 * - title_tag (string) (default: 'h2')
  * - title_link: (link object) (default: {})
  * - title_attributes: (drupal attrs)
  * - id (int) (default: random(1000))
  * - flush (boolean) (default: false)
  * - items (array) (default: []): format: [
  *     {
  *       title: (string),
  *       title_tag: (string),
  *       content: (block),
  *       stay_open (boolean) (default: false)
  *     },
  *   ]
  * - open_item_id (int) (default: 0)
  *
  * usage example: @see README.md
  *
 */
```

All components usually come with "**Available properties**" or "**Available config**" or similar, those are the dynamic properties we can change without needing to adjust the component itself.

So in the **Accordion** component above, we can override or pass:

* `title`
* `title_tag`
* `title_link`
* `id`
* `flush`
* `items`
* `open_item_id`

While looking at the Accordion component code, it is worth noting that for the title, we are using the `radix:heading` component:

```twig
{% if title is not empty %}
  {% include 'radix:heading' with {
      html_tag: 'h2',
      content: title,
      title_link: title_link,
      attributes: title_attributes,
      heading_utility_classes: ['block__title']
    }
  %}
{% endif %}
```

The same concept applies here, so simply to define a `h2` tag with a title and link, we can re-use the `radix:heading` component.

Note the `heading_utility_classes` in the above code, we have `[COMPONENT-NAME]_utility_classes` used quite extensively in almost all components, the use case is just simply if you need more custom classes, you could pass it without needing to manually edit the actual Radix component.

To further understand the ins and outs of a component, study each component separately.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trydrupal.com/radix/working-with-the-components/an-example-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.