{/* heading.mdx */}

import { Canvas, Title, Subtitle, ArgTypes, Source, Meta, Description, Primary, Story, Stories, Controls } from '@storybook/blocks';
import * as comStories from './heading.stories.json';
import templateSource from './heading.twig?raw';

<Meta of={comStories} name="Docs"/>

<Title />
<Subtitle />
<Description />

> #### [Bootstrap Documentation on Heading](https://getbootstrap.com/docs/5.3/content/typography/#headings)
> * [Headings](https://getbootstrap.com/docs/5.3/content/typography/#headings)
> * [Display headings](https://getbootstrap.com/docs/5.3/content/typography/#display-headings)

<Primary />

## Properties
<Controls />

## Attributes:
 * `attributes`: Attributes array.

## Slots:
 * `content`: Content text for the heading.

<Stories of={comStories} />

## Examples

**Example #1:** Have a heading for the h1 page title
```
{% include 'vartheme_bs5:heading' with {
    html_tag: 'h1',
    content: title|render|striptags|trim,
    attributes: title_attributes,
    heading_utility_classes: classes
  }
%}
```

**Example #2:** Use for the heading of a block
```
{% include 'vartheme_bs5:heading' with {
    html_tag: heading_tag,
    content: heading_text|render|striptags|trim,
    attributes: []
  }
%}
```

**Example #3:** Use in views title
```
{% embed "vartheme_bs5:heading" with {
  attributes: title_attributes,
  content: label,
  html_tag: 'h2'
} %}
{% endembed %}
```

**Example #4** Have title with utility classes
```
{% include "vartheme_bs5:heading" with {
  attributes: heading_attributes,
  html_tag: 'h2',
  content: heading,
  heading_utility_classes: ['rich-heading', 'mb-2']
} %}
```

**Example #5** Heading for the the alert message
```
	{% if heading|render|striptags|trim is not empty %}
		{% include "vartheme_bs5:heading" with {
			html_tag: 'h4',
			content: heading|render|striptags|trim,
			heading_utility_classes: ['alert-heading']
		} only %}
	{% endif %}
```
**Example #6** Have title with URL link
```
{% include "vartheme_bs5:heading" with {
  attributes: heading_attributes,
  html_tag: 'h2',
  content: heading,
  url: '#'
} %}
```

## Source code
[//]: # (Twig Template source code)
<Source code={templateSource} />
