# Headpile

A stacked column of people profiles — headshot, name, role and description — rendered from a figures array.

**Category:** Components/Text elements/Headpile

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

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `class` | `string` | — | ✓ | Add classes to target with custom CSS. |
| `id` | `string` | — | ✓ | Add an id to target with custom CSS. |
| `width` | `Extract<ContainerWidth, 'normal' \| 'wide'>` | `'normal'` |  | Width of the container. |
| `colour` | `string` | `'#cccccc'` |  | Default background colour to be used as a mount behind the headshot. |
| `figures` | `{       /**        * Headshot image src. Be sure to prefix the image        *        * ```typescript        * import { asset } from '$app/paths';        *        * const imgSrc = asset('/images/my-image.jpg');        * ```        */       img: string;       /**        * Figure name.        */       name: string;       /**        * Figure role or title.        */       role?: string;       /**        * Text describing the person.        */       text: string;       /**        * Background colour to be used as a mount behind the headshot.        */       colour?: string;     }[]` | — | ✓ | Individual figures -- i.e., people -- for the headpile. |

## Examples

### Demo

```svelte
<Headpile figures={/* defaultArgs */} />
```

## Documentation

# Headpile

The `Headpile` component is a headshot-bulleted list of people, identifying them with their names, roles and a short description of their significance to a story.

It's designed to be used with headshots that have had their background removed, which can be done in the [Preview app](https://support.apple.com/en-gb/guide/preview/prvw15636/mac?#apd320b3b1b750a4) on macOS.

```svelte
<script>
  import { Headpile } from '@reuters-graphics/graphics-components';
  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
</script>

<Headpile
  figures={[
    {
      img: asset('/images/person-A.jpg'),
      name: 'General Abdel Fattah al-Burhan',
      role: "Sudan's Sovereign Council Chief and military commander",
      text: 'Burhan was little known in public life until taking part in the coup ...',
    },
    {
      img: asset('/images/person-B.jpg'),
      name: 'General Mohamed Hamdan Dagalo',
      role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
      text: 'Popularly known as Hemedti, Dagalo rose from lowly beginnings ...',
    },
  ]}
/>
```