hero headline stories
This commit is contained in:
Prasanta Kumar Dutta
parent
10f4c554bd
commit
60ba223098
11 changed files with 447 additions and 120 deletions
|
|
@ -77,7 +77,7 @@
|
|||
</Story>
|
||||
|
||||
<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
|
||||
<Headline>
|
||||
<Headline width="wide">
|
||||
<h1 class="custom-hed" slot="hed">
|
||||
<span class="small block text-base">The secret to</span>
|
||||
“The Nutcracker's”
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
</script>
|
||||
|
||||
<Block width="{width}" class="headline text-center fmt-9 fmb-5 {cls}">
|
||||
<header>
|
||||
<header class="relative">
|
||||
{#if $$slots.crown}
|
||||
<div class="crown-container">
|
||||
<!-- Crown named slot -->
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ Use the `hed` and/or `dek` named slots to override those elements with completel
|
|||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline>
|
||||
<Headline width="wide">
|
||||
<h1 class="custom-hed" slot="hed">
|
||||
<span class="small block text-base">The secret to</span>
|
||||
“The Nutcracker's”
|
||||
|
|
|
|||
|
|
@ -7,10 +7,20 @@
|
|||
import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
|
||||
// @ts-ignore
|
||||
import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
|
||||
// @ts-ignore
|
||||
import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
|
||||
// @ts-ignore
|
||||
import videoDocs from './stories/docs/backgroundVideo.md?raw';
|
||||
// @ts-ignore
|
||||
import customHedDocs from './stories/docs/customHed.md?raw';
|
||||
|
||||
// @ts-ignore
|
||||
import polarImgSrc from './stories/polar.jpg';
|
||||
// @ts-ignore
|
||||
import eurovisImgSrc from './stories/eurovis.jpeg';
|
||||
|
||||
import Block from '../Block/Block.svelte';
|
||||
import SiteHeader from '../SiteHeader/SiteHeader.svelte';
|
||||
import HeroHeadline from './Hero.svelte';
|
||||
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
|
||||
|
||||
|
|
@ -34,6 +44,10 @@
|
|||
control: 'select',
|
||||
options: ['normal', 'wide', 'wider', 'widest'],
|
||||
},
|
||||
hedAlign: {
|
||||
control: 'select',
|
||||
options: ['left', 'center', 'right'],
|
||||
},
|
||||
width: {
|
||||
control: 'select',
|
||||
options: ['normal', 'wide', 'wider', 'widest'],
|
||||
|
|
@ -49,6 +63,10 @@
|
|||
/>
|
||||
|
||||
<Template let:args>
|
||||
<Block width="fluid">
|
||||
<SiteHeader />
|
||||
</Block>
|
||||
|
||||
<HeroHeadline {...args} />
|
||||
</Template>
|
||||
|
||||
|
|
@ -64,12 +82,33 @@
|
|||
}}"
|
||||
/>
|
||||
|
||||
<Story name="With transparent header" {...withStoryDocs(transparentHeaderDocs)}>
|
||||
<div class="transparent-header">
|
||||
<Block width="fluid">
|
||||
<SiteHeader />
|
||||
</Block>
|
||||
|
||||
<HeroHeadline
|
||||
section="World News"
|
||||
hed="Reuters Graphics Interactive"
|
||||
dek="The beginning of a beautiful page"
|
||||
authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
|
||||
publishTime="{new Date('2022-03-04').toISOString()}"
|
||||
img="{polarImgSrc}"
|
||||
/>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="With backdrop graphic" {...withStoryDocs(backgroundGraphicDocs)}>
|
||||
<Block width="fluid">
|
||||
<SiteHeader />
|
||||
</Block>
|
||||
|
||||
<HeroHeadline
|
||||
hed="{'Earthquake devastates Afghanistan'}"
|
||||
hedSize="{'big'}"
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
class="custom-hero mb-0"
|
||||
dek=""
|
||||
authors="{[
|
||||
'Anand Katakam',
|
||||
|
|
@ -86,7 +125,7 @@
|
|||
>
|
||||
<div slot="background">
|
||||
<GraphicBlock
|
||||
width="fluid"
|
||||
width="widest"
|
||||
role="figure"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
|
|
@ -98,15 +137,17 @@
|
|||
</div>
|
||||
</HeroHeadline>
|
||||
<style lang="scss">
|
||||
.hero-headline .headline {
|
||||
align-items: flex-end;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
max-width: var(--normal-column-width) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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 smaller than 100vh
|
||||
--heroHeight: 85svh;
|
||||
|
||||
|
|
@ -114,15 +155,84 @@
|
|||
--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>
|
||||
</Story>
|
||||
|
||||
<Story name="With backdrop video" {...withStoryDocs(videoDocs)}>
|
||||
<Block width="fluid">
|
||||
<SiteHeader />
|
||||
</Block>
|
||||
|
||||
<HeroHeadline
|
||||
class="video-hero"
|
||||
hed="The conflict in Ethiopia"
|
||||
hedSize="bigger"
|
||||
hedWidth="wide"
|
||||
authors="{['Aditi Bhandari ', 'David Lewis']}"
|
||||
publishTime="{new Date('2020-12-18').toISOString()}"
|
||||
>
|
||||
<div slot="background">
|
||||
<GraphicBlock
|
||||
width="widest"
|
||||
role="figure"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
notes="Drone footage from the Village 8 refugee camp in Sudan."
|
||||
ariaDescription="Aerial footage of people houses in refugee camp"
|
||||
>
|
||||
<!-- svelte-ignore a11y-media-has-caption -->
|
||||
<video
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
preload="true"
|
||||
width="100%"
|
||||
poster="video-poster.png"
|
||||
src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
|
||||
>
|
||||
</video>
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</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>
|
||||
</Story>
|
||||
|
||||
<Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
|
||||
<Block width="fluid">
|
||||
<SiteHeader />
|
||||
</Block>
|
||||
|
||||
<HeroHeadline
|
||||
hed="{'The plunge from 29,000 feet'}"
|
||||
hedWidth="wide"
|
||||
|
|
@ -146,3 +256,53 @@
|
|||
</div>
|
||||
</HeroHeadline>
|
||||
</Story>
|
||||
|
||||
<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
|
||||
<HeroHeadline
|
||||
class="custom-hed"
|
||||
authors="{[
|
||||
'Prasanta Kumar Dutta',
|
||||
'Dea Bankova',
|
||||
'Aditi Bhandari',
|
||||
'Anurag Rao',
|
||||
]}"
|
||||
publishTime="{new Date('2023-05-11').toISOString()}"
|
||||
img="{eurovisImgSrc}"
|
||||
>
|
||||
<h1 slot="hed">
|
||||
<div class="body-note">A visual guide to</div>
|
||||
<div class="title text-6xl font-light tracking-widest">EUROVISION</div>
|
||||
</h1>
|
||||
</HeroHeadline>
|
||||
|
||||
<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);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Story>
|
||||
|
||||
<style lang="scss">
|
||||
.transparent-header {
|
||||
:global(.nav-container) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
:global(.nav-container .inner) {
|
||||
background-color: transparent !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:global(.hero-wrapper) {
|
||||
margin-top: -64px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -108,119 +108,159 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="hero-wrapper">
|
||||
<!-- Background media hero-->
|
||||
{#if $$slots.background || img}
|
||||
<Block width="fluid" class="hero-headline background-hero fmt-0">
|
||||
<Headline
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
section="{section}"
|
||||
hedSize="{hedSize}"
|
||||
hed="{hed}"
|
||||
dek="{dek}"
|
||||
/>
|
||||
<div class="background-container">
|
||||
{#if $$slots.background}
|
||||
<!-- Hero graphic named slot -->
|
||||
<slot name="background" />
|
||||
{:else}
|
||||
<GraphicBlock
|
||||
width="{width}"
|
||||
role="img"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
ariaDescription="{ariaDescription}"
|
||||
<div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
|
||||
<div class="hero-wrapper fmb-7" class:embedded="{embedded}">
|
||||
<!-- Background media hero-->
|
||||
{#if $$slots.background || img}
|
||||
<Block width="fluid" class="hero-headline background-hero fmt-0">
|
||||
{#if $$slots.hed}
|
||||
<Headline
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
section="{section}"
|
||||
hedSize="{hedSize}"
|
||||
hed="{hed}"
|
||||
dek="{dek}"
|
||||
>
|
||||
<div
|
||||
class="background-image"
|
||||
style="background-image: url({img})"
|
||||
></div>
|
||||
</GraphicBlock>
|
||||
<!-- Headline named slot -->
|
||||
<div slot="hed">
|
||||
<slot name="hed" />
|
||||
</div>
|
||||
</Headline>
|
||||
{:else}
|
||||
<Headline
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
section="{section}"
|
||||
hedSize="{hedSize}"
|
||||
hed="{hed}"
|
||||
dek="{dek}"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</Block>
|
||||
{#if notes}
|
||||
<TextBlock width="normal">
|
||||
<aside class="fmt-2">
|
||||
{@html marked(notes)}
|
||||
</aside>
|
||||
</TextBlock>
|
||||
<div class="background-container">
|
||||
{#if $$slots.background}
|
||||
<!-- Hero graphic named slot -->
|
||||
<slot name="background" />
|
||||
{:else}
|
||||
<GraphicBlock
|
||||
width="{width}"
|
||||
role="img"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
ariaDescription="{ariaDescription}"
|
||||
>
|
||||
<div
|
||||
class="background-image"
|
||||
style="background-image: url({img})"
|
||||
></div>
|
||||
</GraphicBlock>
|
||||
{/if}
|
||||
</div>
|
||||
</Block>
|
||||
{#if notes}
|
||||
<TextBlock width="normal">
|
||||
<aside class="fmt-2">
|
||||
{@html marked(notes)}
|
||||
</aside>
|
||||
</TextBlock>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Inline hero -->
|
||||
{#if $$slots.inline}
|
||||
<Block width="fluid" class="hero-headline inline-hero">
|
||||
<Headline
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
section="{section}"
|
||||
hedSize="{hedSize}"
|
||||
hed="{hed}"
|
||||
dek="{dek}"
|
||||
/>
|
||||
<div class="graphic-container">
|
||||
<!-- Hero named slot -->
|
||||
<slot name="inline" />
|
||||
</div>
|
||||
</Block>
|
||||
{/if}
|
||||
<!-- Inline hero -->
|
||||
{#if $$slots.inline}
|
||||
<Block width="fluid" class="hero-headline inline-hero">
|
||||
{#if $$slots.hed}
|
||||
<Headline
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
section="{section}"
|
||||
hedSize="{hedSize}"
|
||||
hed="{hed}"
|
||||
dek="{dek}"
|
||||
>
|
||||
<!-- Headline named slot -->
|
||||
<div slot="hed">
|
||||
<slot name="hed" />
|
||||
</div>
|
||||
</Headline>
|
||||
{:else}
|
||||
<Headline
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
section="{section}"
|
||||
hedSize="{hedSize}"
|
||||
hed="{hed}"
|
||||
dek="{dek}"
|
||||
/>
|
||||
{/if}
|
||||
<div class="graphic-container">
|
||||
<!-- Hero named slot -->
|
||||
<slot name="inline" />
|
||||
</div>
|
||||
</Block>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $$slots.byline}
|
||||
<!-- Custom byline/dateline -->
|
||||
<slot name="byline" />
|
||||
{:else if authors.length > 0 || publishTime}
|
||||
<Byline
|
||||
class="fmt-7 fmb-5"
|
||||
authors="{authors}"
|
||||
publishTime="{publishTime}"
|
||||
updateTime="{updateTime}"
|
||||
align="left"
|
||||
/>
|
||||
{/if}
|
||||
<div class="hero-byline fmb-5">
|
||||
{#if $$slots.byline}
|
||||
<!-- Custom byline/dateline -->
|
||||
<slot name="byline" />
|
||||
{:else if authors.length > 0 || publishTime}
|
||||
<Byline
|
||||
authors="{authors}"
|
||||
publishTime="{publishTime}"
|
||||
updateTime="{updateTime}"
|
||||
align="left"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../scss/mixins';
|
||||
|
||||
:global {
|
||||
.background-hero {
|
||||
.hero-wrapper {
|
||||
:global(.background-hero) {
|
||||
height: var(--heroHeight, 100svh);
|
||||
max-height: 1800px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.headline {
|
||||
@include fmt-0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
height: var(--heroHeight, 100svh);
|
||||
max-height: 1800px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.byline-container {
|
||||
:global(.background-hero .headline) {
|
||||
@include fmt-0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
height: var(--heroHeight, 100svh);
|
||||
max-height: 1800px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
:global(aside p) {
|
||||
@include body-caption;
|
||||
}
|
||||
|
||||
:global(video) {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: var(--heroHeight);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-byline {
|
||||
:global(.byline-container) {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
// Caption and Sources
|
||||
aside {
|
||||
p {
|
||||
@include body-caption;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.background-image {
|
||||
width: auto;
|
||||
height: var(--heroHeight, 100svh);
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ Reuters Graphics headline with ai2svelte graphic as background.
|
|||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
import Map from './ai2svelte/graphic.svelte';
|
||||
import { HeroHeadline } from '@reuters-graphics/graphics-components';
|
||||
import QuakeMap from './ai2svelte/graphic.svelte';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
|
|
@ -11,7 +11,7 @@ Reuters Graphics headline with ai2svelte graphic as background.
|
|||
hed="{'Earthquake devastates Afghanistan'}"
|
||||
hedSize="{'big'}"
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
class="custom-hero mb-0"
|
||||
dek=""
|
||||
authors="{[
|
||||
'Anand Katakam',
|
||||
|
|
@ -28,7 +28,7 @@ Reuters Graphics headline with ai2svelte graphic as background.
|
|||
>
|
||||
<div slot="background">
|
||||
<GraphicBlock
|
||||
width="fluid"
|
||||
width="widest"
|
||||
role="figure"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
|
|
@ -41,15 +41,17 @@ Reuters Graphics headline with ai2svelte graphic as background.
|
|||
</HeroHeadline>
|
||||
|
||||
<style lang="scss">
|
||||
.hero-headline .headline {
|
||||
align-items: flex-end;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
max-width: var(--normal-column-width) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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 smaller than 100vh
|
||||
--heroHeight: 85svh;
|
||||
|
||||
|
|
@ -57,10 +59,20 @@ Reuters Graphics headline with ai2svelte graphic as background.
|
|||
--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>
|
||||
```
|
||||
|
|
|
|||
58
src/components/HeroHeadline/stories/docs/backgroundVideo.md
Normal file
58
src/components/HeroHeadline/stories/docs/backgroundVideo.md
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
Add a cover video and position the title with ease.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { HeroHeadline } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<HeroHeadline
|
||||
class="custom-hero"
|
||||
hed="The conflict in Ethiopia"
|
||||
hedSize="bigger"
|
||||
hedWidth="wide"
|
||||
authors="{['Aditi Bhandari ', 'David Lewis']}"
|
||||
publishTime="{new Date('2020-12-18').toISOString()}"
|
||||
>
|
||||
<div slot="background">
|
||||
<GraphicBlock
|
||||
width="widest"
|
||||
role="figure"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
notes="Drone footage from the Village 8 refugee camp in Sudan."
|
||||
ariaDescription="Aerial footage of people houses in refugee camp"
|
||||
>
|
||||
<!-- svelte-ignore a11y-media-has-caption -->
|
||||
<video
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
preload="true"
|
||||
width="100%"
|
||||
poster="video-poster.png"
|
||||
src="{assets}/videos/intro.mp4"
|
||||
>
|
||||
</video>
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
|
||||
<style lang="scss">
|
||||
.hero-wrapper {
|
||||
--heroHeight: calc(100svh - 60px);
|
||||
.custom-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>
|
||||
```
|
||||
40
src/components/HeroHeadline/stories/docs/customHed.md
Normal file
40
src/components/HeroHeadline/stories/docs/customHed.md
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
Add a custom styled headline.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { HeroHeadline } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||||
</script>
|
||||
|
||||
<HeroHeadline
|
||||
class="custom-hed"
|
||||
authors="{[
|
||||
'Prasanta Kumar Dutta',
|
||||
'Dea Bankova',
|
||||
'Aditi Bhandari',
|
||||
'Anurag Rao',
|
||||
]}"
|
||||
publishTime="{new Date('2023-05-11').toISOString()}"
|
||||
img="{`${assets}/images/myImage.jpg`}"
|
||||
>
|
||||
<h1 slot="hed">
|
||||
<div class="body-note">A visual guide to</div>
|
||||
<div class="title text-6xl font-light tracking-widest">EUROVISION</div>
|
||||
</h1>
|
||||
</HeroHeadline>
|
||||
|
||||
<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);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -2,7 +2,7 @@ Reuters Graphics headline followed by a graphic or any media block.
|
|||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
import { HeroHeadline } from '@reuters-graphics/graphics-components';
|
||||
import Map from './ai2svelte/graphic.svelte';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
Make the hero full bleed and under the header.
|
||||
|
||||
```scss
|
||||
// global.scss
|
||||
|
||||
.nav-container {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.nav-container .inner {
|
||||
background-color: transparent !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
margin-top: -64px;
|
||||
}
|
||||
```
|
||||
BIN
src/components/HeroHeadline/stories/eurovis.jpeg
Normal file
BIN
src/components/HeroHeadline/stories/eurovis.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Loading…
Reference in a new issue