# EndNotes

End-of-story notes such as Sources or Edited by, rendered from an array of title and markdown pairs.

**Category:** Components/Text elements/EndNotes

**Import:** `import { EndNotes } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `notes` | `EndNote[]` | — | ✓ | An array of endnote items. |

## Examples

### Demo

```svelte
<EndNotes notes={/* array — see Props/Types for full type */} />
```

## Documentation

# EndNotes

The `EndNotes` component adds notes such as sources, clarifiying notes and minor corrections that come at the end of a story.

```svelte
<script>
  import { EndNotes } from '@reuters-graphics/graphics-components';

  const notes = [
    {
      title: 'Note',
      text: 'Data is current as of today.',
    },
    {
      title: 'Sources',
      text: 'Data, Inc.',
    },
    {
      title: 'Edited by',
      text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
    },
  ];
</script>

<EndNotes {notes} />
```

## Using with ArchieML docs

With the graphics kit, you'll likely get your text value from an ArchieML doc...

```yaml
# ArchieML doc
[endNotes]
title: Note
text: Data is current as of today

title: Sources
text: Data, Inc.

title: Edited by
text: Editor, Copyeditor
[]
```

... which you'll pass to the `EndNotes` component.

```svelte
<!-- graphics kit -->
<script>
  import { EndNotes } from '@reuters-graphics/graphics-components';

  import content from '$locales/en/content.json';
</script>

<EndNotes notes={content.endNotes} />
```