# Include

> Source: https://design.nanatec.co.ke/components/include/
> Fetches an external HTML file and renders it inline. Loads eagerly by default, or `lazy` to defer until it scrolls into view.

Fetches an external HTML file and renders it inline. Loads eagerly by default, or `lazy` to defer until it scrolls into view.

## Preview

```html
<nana-include src="/fragments/example.html"></nana-include>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/include";
```

## Basic usage

```html
<nana-include src="/fragments/example.html"></nana-include>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-error` | `CustomEvent` | Fired on failure (`detail.status`) |
| `nana-load` | `CustomEvent` | Fired after the content loads |

## Related components

<ul class="related not-content">
  <li><a href="/components/mutation-observer/">Mutation Observer</a></li>
  <li><a href="/components/resize-observer/">Resize Observer</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-include--docs