# DocumentCloud

An embedded DocumentCloud document, referenced by slug in a sandboxed iframe and sized to a container width.

**Category:** Components/Multimedia/DocumentCloud

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

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `slug` | `string` | — | ✓ | The unique identifier for the document. |
| `altText` | `string` | — | ✓ | Alt text for the document. |
| `width` | `ContainerWidth` | `'normal'` |  | Width of the container, one of: normal, wide, wider, widest or fluid Options: `normal`, `wide`, `wider`, `widest`, `fluid` |
| `id` | `string` | `''` |  | Add an ID to target with SCSS. |
| `class` | `string` | `''` |  | Add a class to target with SCSS. |

## Examples

### Demo

```svelte
<DocumentCloud
  slug="3259984-Trump-Intelligence-Allegations"
  altText="These Reports Allege Trump Has Deep Ties To Russia"
/>
```

## Documentation

# DocumentCloud

The `DocumentCloud` component embeds a document hosted by [DocumentCloud](https://documentcloud.org).

The document must have its access level set to **public** before it can be embedded. The `slug` can be found after the final slash in the document's URL.

For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The `slug` is `3259984-Trump-Intelligence-Allegations`.

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

<DocumentCloud
  slug="3259984-Trump-Intelligence-Allegations"
  altText="These Reports Allege Trump Has Deep Ties To Russia"
/>
```