{/* html-code.mdx */}

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

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

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

> ### Bootstrap documentation
> * https://getbootstrap.com/docs/5.3/content/typography/
> * https://getbootstrap.com/docs/5.3/content/typography/#inline-text-elements
> * https://getbootstrap.com/docs/5.3/utilities/api/

<Primary />

## Properties
<Controls />

<Stories of={comStories} />

## Notes
* This component renders HTML using Twig `|raw`
* Use only trusted/sanitized content
* Best for small custom HTML blocks inside components

## Examples

### Example 1: Simple paragraph
<Source
  code={`{% include "vartheme_bs5_educare:html-code" with {
  code: '<p class="mb-0">Hello <strong>world</strong>.</p>'
} %}`}
/>

### Example 2: Link
<Source
  code={`{% include "vartheme_bs5_educare:html-code" with {
  code: '<p class="mb-0">Visit <a class="link-primary" href="#">this link</a>.</p>'
} %}`}
/>

### Example 3: Card block
<Source
  code={`{% include "vartheme_bs5_educare:html-code" with {
  code: '<div class="p-3 border rounded-2">
    <h3 class="h5 mb-2">Card title</h3>
    <p class="mb-0">Some <em>rich</em> content.</p>
  </div>'
} %}`}
/>

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