# Headline

A centred story headline with kicker and dek, and an embedded Byline for authors and timestamps.

**Category:** Components/Text elements/Headline

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

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `hed` | `string \| Snippet` | `'Reuters Graphics Interactive'` |  | Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. |
| `class` | `string` | `''` |  | Add extra classes to the block tag to target it with custom CSS. |
| `hedSize` | `HeadlineSize` | `'normal'` |  | Headline size: small, normal, big, bigger, biggest Options: `small`, `normal`, `big`, `bigger`, `biggest` |
| `dek` | `string \| Snippet` | — |  | Dek, parsed as a markdown string OR as a custom snippet. |
| `section` | `string` | — |  | Section title |
| `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. |
| `width` | `'normal' \| 'wide' \| 'wider' \| 'widest'` | `'normal'` |  | Width of the headline: normal, wide, wider, widest Options: `normal`, `wide`, `wider`, `widest` |
| `getAuthorPage` | `(author: string) => string` | — |  | Custom function that returns an author page URL. |
| `crown` | `Snippet` | — |  | Custom crown snippet |
| `byline` | `Snippet` | — |  | Optional snippet for a custom byline. |
| `published` | `Snippet` | — |  | Optional snippet for a custom published dateline. |
| `updated` | `Snippet` | — |  | Optional snippet for a custom updated dateline. |

## Examples

### Demo

```svelte
<Headline
  hed="Reuters Graphics interactive"
  dek="The beginning of a beautiful page"
  section="World News"
/>
```

### With byline and dateline

```svelte
<Headline
  hed={'Reuters Graphics Interactive'}
  dek={'The beginning of a beautiful page'}
  section={'Global news'}
  authors={['Jane Doe']}
  publishTime={new Date('2020-01-01').toISOString()}
  getAuthorPage={(author: string) => {
    return `mailto:${author.replace(' ', '')}@example.com`;
  }}
/>
```

### Custom hed and dek

```svelte
<Headline width="wide">
  {#snippet hed()}
    <h1 class="custom-hed">
      <span class="small block text-base">The secret to</span>
      “The Nutcracker's”
      <span class="small block text-base fpt-1">success</span>
    </h1>
  {/snippet}
  {#snippet dek()}
    <p class="custom-dek !fmt-3">
      How “The Nutcracker” ballet became an<span
        class="font-medium mx-1 px-1.5 py-1">American holday staple</span
      >and a financial pillar of ballet companies across the country
    </p>
  {/snippet}
</Headline>
```

### Crown image

```svelte
<Headline
  class="!fmt-3"
  hed="Europa"
  publishTime={new Date('2020-01-01').toISOString()}
>
  <!-- Add a crown -->
  {#snippet crown()}
    <img
      src={crownImgSrc}
      width="100"
      class="mx-auto mb-0"
      alt="Illustration of Europe"
    />
  {/snippet}
</Headline>
```

### Crown graphic

```svelte
<Headline
  width="wider"
  class="!fmt-1"
  hed={'Unfriendly skies'}
  dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
  section={'Ukraine Crisis'}
  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
  publishTime={new Date('2022-03-04').toISOString()}
>
  <!-- Add a crown graphic -->
  {#snippet crown()}
    <Map />
  {/snippet}
</Headline>
```

## Documentation

# Headline

The `Headline` component creates headlines in the legacy Reuters Graphics style, with the text centred on the page.

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

<Headline
  hed="Reuters Graphics Interactive"
  dek="The beginning of a beautiful page"
  section="World News"
/>
```

## With bylines and dateline

Optionally, you can add authors and a publish time to the headline, which the `Headline` component internally renders with the [Byline](./?path=/docs/components-text-elements-byline--docs) component.

> **Note**: Since `Headline` uses `Byline`, you can customise the author page hyperlink and bylines with the `getAuthorPage`, `byline`, `published` and `updated` props.

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

<Headline
  hed={'Reuters Graphics Interactive'}
  dek={'The beginning of a beautiful page'}
  section={'Global news'}
  authors={['Jane Doe']}
  publishTime={new Date('2020-01-01').toISOString()}
  getAuthorPage={(author) => `mailto:${author.replace(' ', '')}@example.com`}
/>
```

## Custom hed and dek

Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with custom elements.

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

<Headline width="wide">
  <!-- Custom hed snippet -->
  {#snippet hed()}
    <h1 class="custom-hed">
      <span class="small block text-base">The secret to</span>
      “The Nutcracker's”
      <span class="small block text-base fpt-1">success</span>
    </h1>
  {/snippet}

  <!-- Custom dek snippet -->
  {#snippet dek()}
    <p class="custom-dek !fmt-3">
      How “The Nutcracker” ballet became an<span
        class="font-medium mx-1 px-1.5 py-1">American holday staple</span
      >and a financial pillar of ballet companies across the country
    </p>
  {/snippet}
</Headline>

<!-- Custom styles -->
<style lang="scss">
  .custom-hed {
    line-height: 0.9;
  }
  .custom-dek {
    span {
      background-color: #fde68a;
    }
  }
</style>
```

## With crown image

To add a crown image, use the `crown` [snippet](https://svelte.dev/docs/svelte/snippet).

```svelte
<script>
  import { Headline } from '@reuters-graphics/graphics-components';
  import { asset } from '$app/paths';
</script>

<Headline
  class="!fmt-3"
  hed="Europa"
  publishTime={new Date('2020-01-01').toISOString()}
>
  <!-- Add a crown -->
  {#snippet crown()}
    <img
      src={crownImgSrc}
      width="100"
      class="mx-auto mb-0"
      alt="Illustration of Europe"
    />
  {/snippet}
</Headline>
```

## With crown graphic

Add a full graphic or any other component in the crown.

```svelte
<script>
  import { Headline } from '@reuters-graphics/graphics-components';
  import { asset } from '$app/paths'; // If in Graphis Kit

  import Map from './ai2svelte/graphic.svelte'; // Import the crown graphic component
</script>

<Headline
  width="wider"
  class="!fmt-1"
  hed={'Unfriendly skies'}
  dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
  section={'Ukraine Crisis'}
  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
  publishTime={new Date('2022-03-04').toISOString()}
>
  <!-- Add a crown graphic -->
  {#snippet crown()}
    <!-- Pass `assetsPath` if in graphics kit -->
    <Map assetsPath={asset('/').replace(/\/$/, '')} />
  {/snippet}
</Headline>
```