320 lines
9 KiB
Text
320 lines
9 KiB
Text
import { Meta, Canvas } from '@storybook/blocks';
|
||
|
||
import * as HeroHeadlineStories from './HeroHeadline.stories.svelte';
|
||
|
||
<Meta of={HeroHeadlineStories} />
|
||
|
||
# HeroHeadline
|
||
|
||
The `HeroHeadline` component creates a Reuters Graphics headline with a hero media, which can be a graphic, photo, video, or any other media.
|
||
|
||
By default, the hero is in the background, i.e. the headline and dek are stacked on top of the hero. You can unstack and make the headline and dek come before or after the hero media by setting `stacked: true`. [Read more.](?path=/docs/components-text-elements-heroheadline--docs&globals=#transparent-site-header)
|
||
|
||
## Photo hero
|
||
|
||
To use a photo as the hero, simply pass the image source to the `img` prop.
|
||
|
||
```svelte
|
||
<!-- App.svelte -->
|
||
<script>
|
||
import { HeroHeadline } from '@reuters-graphics/graphics-components';
|
||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||
|
||
let { embedded = false } = $props(); // 👈 If using in the Graphics Kit...
|
||
</script>
|
||
|
||
<HeroHeadline
|
||
{embedded}
|
||
img={`${assets}/images/polar-bear.jpg`}
|
||
ariaDescription="A photo of a polar bear"
|
||
notes="Photo by REUTERS"
|
||
section={'World News'}
|
||
hed={'Reuters Graphics Interactive'}
|
||
dek={'The beginning of a beautiful page'}
|
||
authors={['Jane Doe', 'John Doe']}
|
||
/>
|
||
```
|
||
|
||
<Canvas of={HeroHeadlineStories.PhotoHero} />
|
||
|
||
## Transparent site header
|
||
|
||
In the Graphics Kit, set styles in `global.scss` to make the Reuters site header transparent and make the hero go all the way to the top of the page:
|
||
|
||
```scss
|
||
// global.scss
|
||
.nav-container {
|
||
background-color: transparent !important;
|
||
}
|
||
.nav-container .inner {
|
||
background-color: transparent !important;
|
||
border: none !important;
|
||
}
|
||
.hero-wrapper {
|
||
margin-top: -64px;
|
||
}
|
||
```
|
||
|
||
<Canvas of={HeroHeadlineStories.TransparentHeader} />
|
||
|
||
## Ai2svelte hero
|
||
|
||
To use an ai2svelte graphic as the hero, wrap your ai2svelte component in a `GraphicBlock` component and insert it inside the `HeroHeadline` component.
|
||
|
||
To customise styles, use CSS to target the class passed to `HeroHeadline`.
|
||
|
||
> **Note:** Pass `notes` and `ariaDescription` to the `GraphicBlock` component to provide additional information about the ai2svelte graphic.
|
||
|
||
```svelte
|
||
<!-- App.svelte -->
|
||
<script>
|
||
import {
|
||
HeroHeadline,
|
||
GraphicBlock,
|
||
} from '@reuters-graphics/graphics-components';
|
||
|
||
import QuakeMap from './ai2svelte/graphic.svelte'; // Your ai2svelte component
|
||
|
||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||
|
||
export let embedded = false; // 👈 If using in the Graphics Kit...
|
||
</script>
|
||
|
||
<HeroHeadline
|
||
{embedded}
|
||
hed="Earthquake devastates Afghanistan"
|
||
hedSize="big"
|
||
hedWidth="wide"
|
||
class="custom-hero mb-0"
|
||
authors={[
|
||
'Anand Katakam',
|
||
'Vijdan Mohammad Kawoosa',
|
||
'Adolfo Arranz',
|
||
'Wen Foo',
|
||
'Simon Scarr',
|
||
'Aman Bhargava',
|
||
'Jitesh Chowdhury',
|
||
'Manas Sharma',
|
||
'Aditi Bhandari',
|
||
]}
|
||
publishTime={new Date('2022-06-24').toISOString()}
|
||
>
|
||
<GraphicBlock
|
||
width="widest"
|
||
role="figure"
|
||
class="my-0"
|
||
ariaDescription="Earthquake impact map"
|
||
>
|
||
<!-- Pass `assetsPath` if in Graphics Kit -->
|
||
<QuakeMap assetsPath={assets || '/'} />
|
||
</GraphicBlock>
|
||
</HeroHeadline>
|
||
|
||
<!-- Customise styles using the class (e.g. `custom-hero` here) passed to `HeroHeadline` -->
|
||
<style lang="scss">
|
||
.hero-wrapper {
|
||
.custom-hero.headline {
|
||
// Adjust vertical positioning
|
||
align-items: flex-end !important;
|
||
|
||
@media (max-width: 1100px) {
|
||
// Adjust line length of title
|
||
max-width: var(--normal-column-width) !important;
|
||
}
|
||
}
|
||
|
||
// Make hero shorter than 100vh
|
||
--heroHeight: 85svh;
|
||
|
||
@media (max-width: 960px) {
|
||
--heroHeight: 65svh;
|
||
}
|
||
|
||
// For small height
|
||
@media (max-height: 850px) {
|
||
--heroHeight: 100svh;
|
||
}
|
||
|
||
// Custom hero sizing for landscape mobile
|
||
@media (max-width: 960px) and (orientation: landscape) {
|
||
--heroHeight: 200svh;
|
||
}
|
||
}
|
||
|
||
// Override default fixed height for hero layout in embeds
|
||
.hero-wrapper.embedded {
|
||
--heroHeight: 1000px;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
<Canvas of={HeroHeadlineStories.Ai2svelteHero} />
|
||
|
||
## Video hero
|
||
|
||
To add a video as the hero, use the [Video](?path=/docs/components-multimedia-video--docs) component. To customise styles, use CSS to target the class passed to `HeroHeadline`.
|
||
|
||
> **Note:** Pass `notes` and `ariaDescription` to the `GraphicBlock` component to provide additional information about the video.
|
||
|
||
```svelte
|
||
<script>
|
||
import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
|
||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||
|
||
export let embedded = false; // 👈 If using in the Graphics Kit...
|
||
</script>
|
||
|
||
<HeroHeadline
|
||
{embedded}
|
||
class="video-hero"
|
||
hed="The conflict in Ethiopia"
|
||
hedSize="bigger"
|
||
hedWidth="wide"
|
||
authors={['Aditi Bhandari ', 'David Lewis']}
|
||
publishTime={new Date('2020-12-18').toISOString()}
|
||
>
|
||
<Video
|
||
width="widest"
|
||
class="my-0"
|
||
showControls={false}
|
||
preloadVideo="auto"
|
||
playVideoWhenInView={false}
|
||
src={`${assets}/videos/intro.mp4`}
|
||
poster={`${assets}/images/video-poster-intro.jpg`}
|
||
notes="Drone footage from the Village 8 refugee camp in Sudan."
|
||
ariaDescription="Aerial footage of people houses in refugee camp"
|
||
/>
|
||
</HeroHeadline>
|
||
|
||
<!-- Customise styles using the class (e.g. `video-hero` here) passed to `HeroHeadline` -->
|
||
<style lang="scss">
|
||
.hero-wrapper {
|
||
--heroHeight: calc(100svh - 60px);
|
||
.video-hero.headline {
|
||
header {
|
||
// Adjust vertical position as offset from default center
|
||
top: calc(50svh - 250px);
|
||
}
|
||
|
||
h1 {
|
||
color: #ffd430;
|
||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
```
|
||
|
||
<Canvas of={HeroHeadlineStories.VideoHero} />
|
||
|
||
## Inline hero
|
||
|
||
To use a photo, graphic, video, etc. as an inline hero -- i.e. to make the hero appear below or above the headline and dek, not on top -- set `stacked` to `false`. Otherwise add your hero media as documented above.
|
||
|
||
> **Note:** Pass `notes` and `ariaDescription` to the component you're inserting into `HeroHeadline` to provide additional information.
|
||
|
||
```svelte
|
||
<!-- App.svelte -->
|
||
<script>
|
||
import {
|
||
HeroHeadline,
|
||
GraphicBlock,
|
||
} from '@reuters-graphics/graphics-components';
|
||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||
|
||
export let embedded = false; // 👈 If using in the Graphics Kit...
|
||
</script>
|
||
|
||
<!-- Set `stacked` to `false` -->
|
||
<HeroHeadline
|
||
{embedded}
|
||
stacked={false}
|
||
section="Global news"
|
||
hed="The plunge from 29,000 feet"
|
||
dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
|
||
class="mb-0"
|
||
authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
|
||
publishTime={new Date('2020-01-01').toISOString()}
|
||
>
|
||
<GraphicBlock
|
||
width="widest"
|
||
role="figure"
|
||
class="my-0"
|
||
ariaDescription="Earthquake impact map"
|
||
notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
|
||
>
|
||
<!-- Pass `assetsPath` if in Graphics Kit -->
|
||
<CrashMap assetsPath={assets || '/'} />
|
||
</GraphicBlock>
|
||
</HeroHeadline>
|
||
```
|
||
|
||
<Canvas of={HeroHeadlineStories.InlineHero} />
|
||
|
||
## Custom hed and dek
|
||
|
||
The `HeroHeadline` component internally uses the [Headline](?path=/docs/components-text-elements-headline--docs) component to render the headline and dek.
|
||
|
||
If `hed` and `dek` values are strings, they are rendered according to the default Reuters style. To customise the headline and dek, pass custom `hed` and `dek` elements as [snippets](https://svelte.dev/docs/svelte/snippet) to `HeroHeadline` -- the same way as you would with `Headline`.
|
||
|
||
```svelte
|
||
<!-- App.svelte -->
|
||
<HeroHeadline
|
||
class="custom-hed"
|
||
authors={[
|
||
'Prasanta Kumar Dutta',
|
||
'Dea Bankova',
|
||
'Aditi Bhandari',
|
||
'Anurag Rao',
|
||
]}
|
||
publishTime={new Date('2023-05-11').toISOString()}
|
||
img={eurovisImgSrc}
|
||
>
|
||
<!-- Custom hed snippet -->
|
||
{#snippet hed()}
|
||
<h1>
|
||
<div class="body-note">A visual guide to</div>
|
||
<div class="title text-6xl font-light tracking-widest">EUROVISION</div>
|
||
</h1>
|
||
{/snippet}
|
||
|
||
<!-- Custom dek snippet -->
|
||
{#snippet dek()}
|
||
<div class="dek">
|
||
<p>
|
||
Performers from 37 countries are coming together May 9-13 in Liverpool,
|
||
England, for the 67th annual Eurovision Song Contest. The winner gets
|
||
the trophy and their country gets the right to host next year’s event,
|
||
produced by the European Broadcasting Union (EBU).
|
||
</p>
|
||
</div>
|
||
{/snippet}
|
||
|
||
<!-- Style your custom hed and dek -->
|
||
<style lang="scss">
|
||
.custom-hed {
|
||
h1 {
|
||
.body-note {
|
||
color: #ffffff;
|
||
}
|
||
.title {
|
||
color: #ffffff;
|
||
text-shadow: 1px 1px 8px #ff7c88;
|
||
filter: drop-shadow(0px 0px 12px #ff7c88);
|
||
}
|
||
}
|
||
|
||
.dek {
|
||
margin-top: 1rem;
|
||
p {
|
||
color: #ffffff;
|
||
text-shadow: 1px 1px 8px #ff7c88;
|
||
filter: drop-shadow(0px 0px 12px #ff7c88);
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
</HeroHeadline>
|
||
```
|
||
|
||
<Canvas of={HeroHeadlineStories.CustomHed} />
|