{/* figure.mdx */}

import { Title, Subtitle, Description, Primary, Stories, Controls, Meta, Source } from '@storybook/addon-docs/blocks';
import * as comStories from './figure.stories.json';
import templateSource from './figure.twig?raw';

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

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

> ### Bootstrap documentation
> * [Utilities — Borders](https://getbootstrap.com/docs/5.3/utilities/borders/)
> * [Utilities — Background](https://getbootstrap.com/docs/5.3/utilities/background/)
> * [Utilities — Colors](https://getbootstrap.com/docs/5.3/utilities/colors/)
> * [Content — Typography](https://getbootstrap.com/docs/5.3/content/typography/)

<Primary />

## Properties
<Controls />

<Stories of={comStories} />

## Twig usage example
```twig
{% include "vartheme_bs5_educare:figure" with {
  number: '0000',
  suffix: '+',
  description: 'Number description',
  background_color: 'bg-primary',
  number_size: 'display-1',
  number_color: 'text-white',
  suffix_color: 'text-white-50',
  description_size: 'fs-6',
  description_color: 'text-white-50',
} %}
```

## Source code
<Source code={templateSource} />
