# SiteHeadline

A story headline block with section label, byline authors and publish/update times; links author names to their Reuters author pages.

**Category:** Components/Text elements/SiteHeadline

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

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `hed` | `string` | — |  | Headline |
| `hedSize` | `HeadlineSize` | `'normal'` |  | Headline size Options: `small`, `normal`, `big` |
| `section` | `string` | `'Graphics'` |  | Section title |
| `sectionUrl` | `string` | `'https://graphics.reuters.com'` |  | Section URL, parsed as a string. Set to blank to remove link |
| `authors` | `string[]` | — | ✓ | Array of author names, which will be slugified to create links to Reuters author pages |
| `publishTime` | `string` | — | ✓ | Publish time as a datetime string |
| `updateTime` | `string` | `''` |  | Update time as a datetime string |
| `id` | `string` | `''` |  | Add an id to to target with custom CSS |
| `class` | `string` | `''` |  | Add extra classes to target with custom CSS |
| `getAuthorPage` | `(author: string) => string` | — |  | Custom function that returns an author page URL. |

## Examples

### Demo

```svelte
<SiteHeadline
  hed="Ukraine makes surprising gains in counteroffensive"
  authors={[
      'Dea Bankova',
      'Michael Ovaska',
      'Samuel Granados',
      'Prasanta Kumar Dutta',
    ]}
  publishTime={new Date('2021-09-12').toISOString()}
  updateTime={new Date('2021-09-12T13:57:00').toISOString()}
/>
```

### ArchieML

```svelte
<SiteHeadline
  hed={content.hed}
  section={content.section}
  authors={content.authors.split(',')}
  publishTime={content.published}
/>
```

## Documentation

# SiteHeadline

The `SiteHeadline` component creates a simplified Reuters Graphics headline, loosely modelled off the Reuters.com styles.

Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround breaking news pages.

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

<SiteHeadline
  hed="Ukraine makes suprising gains in swift counteroffensive"
  authors={[
    'Dea Bankova',
    'Michael Ovaska',
    'Samuel Granados',
    'Prasanta Kumar Dutta',
  ]}
  publishTime="2021-09-12T00:00:00.000Z"
  updateTime="2021-09-12T12:57:00.000Z"
/>
```

## Using with ArchieML docs

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

```yaml
# ArchieML doc
section: Global News # Optional
sectionUrl: https://www.reuters.com/graphics/ # Optional
hed: A beautiful page
[authors]
* Samuel Granados
* Dea Bankova
[]
published: 2022-09-12T08:30:00.000Z
updated:
```

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

```svelte
<!-- App.svelte -->
<script>
  import { SiteHeadline } from '@reuters-graphics/graphics-components';
  import content from '$locales/en/content.json';
</script>

<SiteHeadline
  section={content.section}
  sectionUrl={content.sectionUrl}
  hed={content.hed}
  authors={content.authors.split(',')}
  publishTime={content.publishTime}
  updateTime={content.updatTime}
/>
```