diff --git a/src/components.d.ts b/src/components.d.ts
index 9a73d677a945fd2b9ed78983d9ba75d59158317d..c3954dfc083fceaefdf1c83a4a03f0ad33e77c43 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -36,6 +36,7 @@ import {
ProcessFlowBoxVariants,
SiteLogoSize,
} from './utils/utils';
+import {ImageSrcSet} from './components/adjacent-image-text/adjacent-image-text';
import {AnchorItem} from './components/hy-anchor-link-list/hy-anchor-link-list';
import {Breadcrumb} from './components/hy-breadcrumbs/hy-breadcrumbs';
import {TagValue} from './components/courses/hy-content-list-item/hy-content-list-item';
@@ -45,10 +46,14 @@ import {IFilterGroupFilter} from './components/hy-filter-group/hy-filter-group';
import {FooterBaseLinks, FooterBaseSome} from './components/footer/hy-footer-base/hy-footer-base';
import {FooterInfoLinks} from './components/footer/hy-footer-info/hy-footer-info';
import {ListItemValue} from './components/hy-general-list/hy-general-list';
+import {ImageSrcSet as ImageSrcSet1} from './components/hy-hero/hy-hero';
+import {ImageSrcSet as ImageSrcSet2} from './components/image/image';
+import {ImageSrcSet as ImageSrcSet3} from './components/hy-introduction/hy-introduction';
import {KeyFigureValue} from './components/hy-key-figure-group/hy-key-figure-group';
import {KeyHighlightValue} from './components/hy-key-highlight-group/hy-key-highlight-group';
import {ProcessFlowValue} from './components/hy-large-process-flow/hy-large-process-flow';
import {PhaseValue} from './components/hy-large-process-flow-phase/hy-large-process-flow-phase';
+import {ImageSrcSet as ImageSrcSet4} from './components/link-box/link-box';
import {LinkBox} from './components/link-box-list/link-box-list';
import {CtaLinkValue} from './components/hy-link-list/hy-link-list';
import {AdditionalInfo, RelatedLink} from './components/hy-list-item/hy-list-item';
@@ -56,6 +61,7 @@ import {MenuLanguage} from './components/navigation/menu-language/menu-language'
import {ComponentLabels} from './components/site-header/site-header';
import {DonateLink, MainMenu} from './components/navigation/hy-menu-main-group/hy-menu-main-group';
import {ProcessFlowBoxValue} from './components/process/process';
+import {ImageSrcSet as ImageSrcSet5} from './components/hy-prominent-image/hy-prominent-image';
import {ShortcutLinkValue} from './components/hy-shortcuts/hy-shortcuts';
import {DesktopLinks as DesktopLinks1} from './components/site-header/site-header';
export namespace Components {
@@ -69,6 +75,7 @@ export namespace Components {
variant: AccordionVariants;
}
interface HyAdjacentImageText {
+ disableLazy: boolean;
headerstyle: string;
imageAlt: string;
imageUrl: string;
@@ -80,6 +87,7 @@ export namespace Components {
mainUrlIsExternal2: boolean;
mainUrlTitle?: string;
mainUrlTitle2?: string;
+ sourceSet: ImageSrcSet[] | string;
textDescription: string;
textTitle?: string;
}
@@ -417,6 +425,7 @@ export namespace Components {
}
interface HyGeneralListItem {
description?: string;
+ disableLazy: boolean;
imageAlt: string;
imageUrl: string;
itemTitle?: string;
@@ -448,11 +457,13 @@ export namespace Components {
interface HyHero {
colorVariant: HeroColorVariant;
description: string;
+ disableLazy: boolean;
headerstyle: string;
heading: string;
image: string;
isExternal: boolean;
scLabel?: string;
+ sourceSet: ImageSrcSet[] | string;
url: string;
urlTitle: string;
}
@@ -465,8 +476,10 @@ export namespace Components {
aspectRatioHeight: number;
aspectRatioWidth: number;
caption: string;
+ disableLazy: boolean;
imageAlt: string;
- imageUrl?: string;
+ imageUrl: string;
+ sourceSet: ImageSrcSet[] | string;
}
interface HyIngress {
headerstyle: string;
@@ -477,10 +490,12 @@ export namespace Components {
isExternal: boolean;
reversed: boolean;
scLabel?: string;
+ sourceSet: ImageSrcSet[] | string;
textDescription: string;
textTitle?: string;
url?: string;
urlTitle?: string;
+ useSlot: boolean;
variant: IntroductionBgColors;
}
interface HyKeyFigure {
@@ -517,14 +532,17 @@ export namespace Components {
variant: LinkVariants;
}
interface HyLinkBox {
+ disableLazy: boolean;
headerstyle: string;
imageAlt: string;
imageUrl: string;
isExternal: boolean;
scLabel?: string;
+ sourceSet: ImageSrcSet[] | string;
textDescription: string;
textTitle?: string;
url?: string;
+ useSlot: boolean;
variant: LinkBoxVariants;
}
interface HyLinkBoxList {
@@ -539,6 +557,7 @@ export namespace Components {
}
interface HyListItem {
additionalInfo?: AdditionalInfo[] | string;
+ disableLazy: boolean;
headerstyle: string;
imageLabel?: string;
isExternal: boolean;
@@ -739,6 +758,7 @@ export namespace Components {
interface HyPersonCard {
categoryTitle?: string;
department?: string;
+ disableLazy: boolean;
email?: string;
field?: string;
firstName?: string;
@@ -769,6 +789,7 @@ export namespace Components {
interface HyProminentImage {
headerstyle: string;
imageUrl?: string;
+ sourceSet: ImageSrcSet[] | string;
textTitle?: string;
}
interface HyQuote {
@@ -872,6 +893,7 @@ export namespace Components {
* Label for date added
*/
dateAddedLabel: string;
+ disableLazy: boolean;
/**
* Duration number
*/
@@ -1470,6 +1492,7 @@ declare namespace LocalJSX {
variant?: AccordionVariants;
}
interface HyAdjacentImageText {
+ disableLazy?: boolean;
headerstyle?: string;
imageAlt?: string;
imageUrl?: string;
@@ -1481,6 +1504,7 @@ declare namespace LocalJSX {
mainUrlIsExternal2?: boolean;
mainUrlTitle?: string;
mainUrlTitle2?: string;
+ sourceSet?: ImageSrcSet[] | string;
textDescription?: string;
textTitle?: string;
}
@@ -1819,6 +1843,7 @@ declare namespace LocalJSX {
}
interface HyGeneralListItem {
description?: string;
+ disableLazy?: boolean;
imageAlt?: string;
imageUrl?: string;
itemTitle?: string;
@@ -1850,11 +1875,13 @@ declare namespace LocalJSX {
interface HyHero {
colorVariant?: HeroColorVariant;
description?: string;
+ disableLazy?: boolean;
headerstyle?: string;
heading?: string;
image?: string;
isExternal?: boolean;
scLabel?: string;
+ sourceSet?: ImageSrcSet[] | string;
url?: string;
urlTitle?: string;
}
@@ -1867,8 +1894,10 @@ declare namespace LocalJSX {
aspectRatioHeight?: number;
aspectRatioWidth?: number;
caption?: string;
+ disableLazy?: boolean;
imageAlt?: string;
imageUrl?: string;
+ sourceSet?: ImageSrcSet[] | string;
}
interface HyIngress {
headerstyle?: string;
@@ -1879,10 +1908,12 @@ declare namespace LocalJSX {
isExternal?: boolean;
reversed?: boolean;
scLabel?: string;
+ sourceSet?: ImageSrcSet[] | string;
textDescription?: string;
textTitle?: string;
url?: string;
urlTitle?: string;
+ useSlot?: boolean;
variant?: IntroductionBgColors;
}
interface HyKeyFigure {
@@ -1919,14 +1950,17 @@ declare namespace LocalJSX {
variant?: LinkVariants;
}
interface HyLinkBox {
+ disableLazy?: boolean;
headerstyle?: string;
imageAlt?: string;
imageUrl?: string;
isExternal?: boolean;
scLabel?: string;
+ sourceSet?: ImageSrcSet[] | string;
textDescription?: string;
textTitle?: string;
url?: string;
+ useSlot?: boolean;
variant?: LinkBoxVariants;
}
interface HyLinkBoxList {
@@ -1941,6 +1975,7 @@ declare namespace LocalJSX {
}
interface HyListItem {
additionalInfo?: AdditionalInfo[] | string;
+ disableLazy?: boolean;
headerstyle?: string;
imageLabel?: string;
isExternal?: boolean;
@@ -2154,6 +2189,7 @@ declare namespace LocalJSX {
interface HyPersonCard {
categoryTitle?: string;
department?: string;
+ disableLazy?: boolean;
email?: string;
field?: string;
firstName?: string;
@@ -2184,6 +2220,7 @@ declare namespace LocalJSX {
interface HyProminentImage {
headerstyle?: string;
imageUrl?: string;
+ sourceSet?: ImageSrcSet[] | string;
textTitle?: string;
}
interface HyQuote {
@@ -2292,6 +2329,7 @@ declare namespace LocalJSX {
* Label for date added
*/
dateAddedLabel?: string;
+ disableLazy?: boolean;
/**
* Duration number
*/
diff --git a/src/components/adjacent-image-text/adjacent-image-text.tsx b/src/components/adjacent-image-text/adjacent-image-text.tsx
index dc864c8adc160b0729986e597713341061bb7fac..19562f23dfb77b1839a72685ed93dccdc6a5a8cd 100644
--- a/src/components/adjacent-image-text/adjacent-image-text.tsx
+++ b/src/components/adjacent-image-text/adjacent-image-text.tsx
@@ -1,4 +1,11 @@
-import {Component, ComponentInterface, Prop, h, Host, Element} from '@stencil/core';
+export interface ImageSrcSet {
+ src: any;
+ media: string;
+ type: string;
+ sizes: string | null;
+}
+
+import {Component, ComponentInterface, Prop, h, Host, Element, Watch} from '@stencil/core';
@Component({
tag: 'hy-adjacent-image-text',
@@ -10,6 +17,7 @@ export class AdjacentImageText implements ComponentInterface {
@Prop() headerstyle: string = 'default';
@Prop() imageUrl: string = null;
@Prop() imageAlt: string = '';
+ @Prop() disableLazy: boolean = false;
@Prop() textTitle?: string;
@Prop() textDescription: string = null;
@@ -23,6 +31,17 @@ export class AdjacentImageText implements ComponentInterface {
@Prop() mainUrlAriaLabel2?: string;
@Prop() mainUrlIsExternal2: boolean = false;
+ private _sourceSet: ImageSrcSet[];
+ @Prop() sourceSet: ImageSrcSet[] | string;
+
+ @Watch('sourceSet') srcSetWatcher(data: ImageSrcSet[] | string) {
+ this._sourceSet = typeof data === 'string' ? JSON.parse(data) : data;
+ }
+
+ componentWillLoad() {
+ this.srcSetWatcher(this.sourceSet);
+ }
+
componentDidLoad() {
let hyMainDiv = this.el.closest('.hy-main');
if (hyMainDiv) {
@@ -52,7 +71,26 @@ export class AdjacentImageText implements ComponentInterface {
<Host>
<div class={classAttributes}>
<div class={imageLeftClassAttributes} style={aspectRatio}>
- <img alt={this.imageAlt} class="hy-image__image" src={this.imageUrl} />
+ {this._sourceSet ? (
+ <picture>
+ {this._sourceSet.map((item) => (
+ <source srcSet={item.src} media={item.media} type={item.type} sizes={item.sizes ? item.sizes : ''} />
+ ))}
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ alt={this.imageAlt}
+ class="hy-image__image"
+ src={this.imageUrl}
+ />
+ </picture>
+ ) : (
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ alt={this.imageAlt}
+ class="hy-image__image"
+ src={this.imageUrl}
+ />
+ )}
</div>
<div class={contentClassAttributes}>
<div class="hy-adjacent-image-text__text-container__info-wrapper">
diff --git a/src/components/adjacent-image-text/readme.md b/src/components/adjacent-image-text/readme.md
index b02fbc7d5e239883b748e2c0e97b50dd3516af0b..10e1521e572dedb71bc1025c62edcb8fe2f4b7fd 100644
--- a/src/components/adjacent-image-text/readme.md
+++ b/src/components/adjacent-image-text/readme.md
@@ -8,21 +8,23 @@ Adjacent image & text
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------------------- | ------------------------ | ----------- | --------- | ----------- |
-| `headerstyle` | `headerstyle` | | `string` | `'default'` |
-| `imageAlt` | `image-alt` | | `string` | `''` |
-| `imageUrl` | `image-url` | | `string` | `null` |
-| `mainUrl` | `main-url` | | `string` | `undefined` |
-| `mainUrl2` | `main-url-2` | | `string` | `undefined` |
-| `mainUrlAriaLabel` | `main-url-aria-label` | | `string` | `undefined` |
-| `mainUrlAriaLabel2` | `main-url-aria-label-2` | | `string` | `undefined` |
-| `mainUrlIsExternal` | `main-url-is-external` | | `boolean` | `false` |
-| `mainUrlIsExternal2` | `main-url-is-external-2` | | `boolean` | `false` |
-| `mainUrlTitle` | `main-url-title` | | `string` | `undefined` |
-| `mainUrlTitle2` | `main-url-title-2` | | `string` | `undefined` |
-| `textDescription` | `text-description` | | `string` | `null` |
-| `textTitle` | `text-title` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| -------------------- | ------------------------ | ----------- | ------------------------- | ----------- |
+| `disableLazy` | `disable-lazy` | | `boolean` | `false` |
+| `headerstyle` | `headerstyle` | | `string` | `'default'` |
+| `imageAlt` | `image-alt` | | `string` | `''` |
+| `imageUrl` | `image-url` | | `string` | `null` |
+| `mainUrl` | `main-url` | | `string` | `undefined` |
+| `mainUrl2` | `main-url-2` | | `string` | `undefined` |
+| `mainUrlAriaLabel` | `main-url-aria-label` | | `string` | `undefined` |
+| `mainUrlAriaLabel2` | `main-url-aria-label-2` | | `string` | `undefined` |
+| `mainUrlIsExternal` | `main-url-is-external` | | `boolean` | `false` |
+| `mainUrlIsExternal2` | `main-url-is-external-2` | | `boolean` | `false` |
+| `mainUrlTitle` | `main-url-title` | | `string` | `undefined` |
+| `mainUrlTitle2` | `main-url-title-2` | | `string` | `undefined` |
+| `sourceSet` | `source-set` | | `ImageSrcSet[] \| string` | `undefined` |
+| `textDescription` | `text-description` | | `string` | `null` |
+| `textTitle` | `text-title` | | `string` | `undefined` |
## Dependencies
diff --git a/src/components/hy-general-list-item/hy-general-list-item.tsx b/src/components/hy-general-list-item/hy-general-list-item.tsx
index 9b99f9e9ca2d649bbf59fc19a108c193d8f26770..83faf6aa1c28f8c222147b72986da26c81754dec 100644
--- a/src/components/hy-general-list-item/hy-general-list-item.tsx
+++ b/src/components/hy-general-list-item/hy-general-list-item.tsx
@@ -9,6 +9,7 @@ export class HyGeneralListItem {
@Prop() description?: string;
@Prop() imageAlt: string = '';
@Prop() imageUrl: string = null;
+ @Prop() disableLazy: boolean = false;
@Prop() itemTitle?: string;
@Prop() label?: string;
@Prop() type?: string;
@@ -35,7 +36,12 @@ export class HyGeneralListItem {
<span>{this.label}</span>
</div>
<figure class={imageClassAttributes} style={aspectRatio}>
- <img alt={this.imageAlt} class="hy-general-list-item__image" src={this.imageUrl} />
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ alt={this.imageAlt}
+ class="hy-general-list-item__image"
+ src={this.imageUrl}
+ />
</figure>
<div class={contentClassAttributes}>
<h3 class="hy-general-list-item__title">{this.itemTitle}</h3>
diff --git a/src/components/hy-general-list-item/readme.md b/src/components/hy-general-list-item/readme.md
index 1727f9869c4280d2ff6bc2997060d06fe621cae7..61c077f286f3c0951e75f8f1c06fcefa01175afe 100644
--- a/src/components/hy-general-list-item/readme.md
+++ b/src/components/hy-general-list-item/readme.md
@@ -4,15 +4,16 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------- | ------------- | ----------- | -------- | ----------- |
-| `description` | `description` | | `string` | `undefined` |
-| `imageAlt` | `image-alt` | | `string` | `''` |
-| `imageUrl` | `image-url` | | `string` | `null` |
-| `itemTitle` | `item-title` | | `string` | `undefined` |
-| `label` | `label` | | `string` | `undefined` |
-| `type` | `type` | | `string` | `undefined` |
-| `url` | `url` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | -------------- | ----------- | --------- | ----------- |
+| `description` | `description` | | `string` | `undefined` |
+| `disableLazy` | `disable-lazy` | | `boolean` | `false` |
+| `imageAlt` | `image-alt` | | `string` | `''` |
+| `imageUrl` | `image-url` | | `string` | `null` |
+| `itemTitle` | `item-title` | | `string` | `undefined` |
+| `label` | `label` | | `string` | `undefined` |
+| `type` | `type` | | `string` | `undefined` |
+| `url` | `url` | | `string` | `undefined` |
## Dependencies
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index b7223500f6c921a4f7c0b1ae6b10199175ad01d1..ce9e672204c821812b3206736ec90bcf3a509790 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -412,6 +412,10 @@
padding: 0;
position: relative;
+ figure {
+ margin: 0;
+ }
+
@include breakpoint($wide) {
background-color: var(--grayscale-white);
bottom: 0;
diff --git a/src/components/hy-hero/hy-hero.tsx b/src/components/hy-hero/hy-hero.tsx
index 524c6a9d7971a77e1af93dad5ad39428606ceb97..054845f1ba53987fa59453da208e92d511221636 100644
--- a/src/components/hy-hero/hy-hero.tsx
+++ b/src/components/hy-hero/hy-hero.tsx
@@ -1,4 +1,11 @@
-import {Component, Host, h, Listen, Prop, Element} from '@stencil/core';
+export interface ImageSrcSet {
+ src: any;
+ media: string;
+ type: string;
+ sizes: string | null;
+}
+
+import {Component, Host, h, Listen, Prop, Element, Watch} from '@stencil/core';
import {HeroColorVariant} from '../../utils/utils';
import {HeadingVarians, HeadingSectionVariants} from '../../utils/utils';
import {CtaLinkButtonVariants} from '../../utils/utils';
@@ -12,6 +19,7 @@ export class HyHero {
@Element() el: HTMLElement;
@Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;
@Prop() image: string;
+ @Prop() disableLazy: boolean = false;
@Prop() heading: string;
@Prop() description: string;
@Prop() url: string;
@@ -19,6 +27,16 @@ export class HyHero {
@Prop() scLabel?: string;
@Prop() isExternal: boolean = false;
@Prop() headerstyle: string = 'common';
+ private _sourceSet: ImageSrcSet[];
+ @Prop() sourceSet: ImageSrcSet[] | string;
+
+ @Watch('sourceSet') srcSetWatcher(data: ImageSrcSet[] | string) {
+ this._sourceSet = typeof data === 'string' ? JSON.parse(data) : data;
+ }
+
+ componentWillLoad() {
+ this.srcSetWatcher(this.sourceSet);
+ }
componentDidLoad() {
let hyMainDiv = this.el.closest('.hy-main');
@@ -88,9 +106,34 @@ export class HyHero {
<Host>
<div class={classAttributes}>
<div class="hy-hero__container">
- <figure class="hy-hero__image-container" style={aspectRatio}>
- <img alt={this.scLabel} class="hy-image__image" src={this.image} />
- </figure>
+ <div class="hy-hero__image-container" style={aspectRatio}>
+ {this.image &&
+ (this._sourceSet ? (
+ <picture>
+ {this._sourceSet.map((item) => (
+ <source
+ srcSet={item.src}
+ media={item.media}
+ type={item.type}
+ sizes={item.sizes ? item.sizes : ''}
+ />
+ ))}
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ alt={this.scLabel}
+ class="hy-image__image"
+ src={this.image}
+ />
+ </picture>
+ ) : (
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ alt={this.scLabel}
+ class="hy-image__image"
+ src={this.image}
+ />
+ ))}
+ </div>
<div class="hy-hero__spacer-box"></div>
<div class="hy-hero__content-container">
<div class={classContentContainer}>
diff --git a/src/components/hy-hero/readme.md b/src/components/hy-hero/readme.md
index 2ffafdf58934ad119c931c11228e92516d699c79..6722a1d2751a901b4b3fd4daf4c303bcbd74e8ef 100644
--- a/src/components/hy-hero/readme.md
+++ b/src/components/hy-hero/readme.md
@@ -8,11 +8,13 @@
| -------------- | --------------- | ----------- | -------------------------------------------------------------------------------------------------------- | ----------------------- |
| `colorVariant` | `color-variant` | | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.fp_white \| HeroColorVariant.white` | `HeroColorVariant.blue` |
| `description` | `description` | | `string` | `undefined` |
+| `disableLazy` | `disable-lazy` | | `boolean` | `false` |
| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `heading` | `heading` | | `string` | `undefined` |
| `image` | `image` | | `string` | `undefined` |
| `isExternal` | `is-external` | | `boolean` | `false` |
| `scLabel` | `sc-label` | | `string` | `undefined` |
+| `sourceSet` | `source-set` | | `ImageSrcSet[] \| string` | `undefined` |
| `url` | `url` | | `string` | `undefined` |
| `urlTitle` | `url-title` | | `string` | `undefined` |
diff --git a/src/components/hy-introduction/hy-introduction.scss b/src/components/hy-introduction/hy-introduction.scss
index 2945cf365cc0130895cb56acb55d93dd72c5d9a3..3b72be2404e5d30683ca07483607535539187ced 100644
--- a/src/components/hy-introduction/hy-introduction.scss
+++ b/src/components/hy-introduction/hy-introduction.scss
@@ -209,6 +209,7 @@
width: 45.73%;
}
+ img,
.hy-image,
.hy-image .hy-image__image-container {
height: 100% !important;
diff --git a/src/components/hy-introduction/hy-introduction.tsx b/src/components/hy-introduction/hy-introduction.tsx
index 5558fbf7a53003c5eee65e9b7a70e6889c715175..a05be6ba7c43a383e0ba80c3b93d239a801b81da 100644
--- a/src/components/hy-introduction/hy-introduction.tsx
+++ b/src/components/hy-introduction/hy-introduction.tsx
@@ -1,3 +1,10 @@
+export interface ImageSrcSet {
+ src: any;
+ media: string;
+ type: string;
+ sizes: string | null;
+}
+
import {Component, Element, Host, h, Prop} from '@stencil/core';
import {IntroductionBgColors, HeadingVarians, HeadingSectionVariants} from '../../utils/utils';
@@ -9,6 +16,7 @@ import {IntroductionBgColors, HeadingVarians, HeadingSectionVariants} from '../.
export class HyIntroduction {
@Prop() variant: IntroductionBgColors = null;
@Prop() reversed: boolean = false;
+ @Prop() useSlot: boolean = false;
@Prop() textTitle?: string;
@Prop() textDescription: string = null;
@Prop() url?: string;
@@ -17,6 +25,7 @@ export class HyIntroduction {
@Prop() imageUrl?: string;
@Prop() isExternal: boolean = false;
@Prop() headerstyle: string = 'common';
+ @Prop() sourceSet: ImageSrcSet[] | string;
@Element() el: HTMLElement;
componentDidLoad() {
@@ -47,7 +56,9 @@ export class HyIntroduction {
const contentWrapperClasses = [
'hy-introduction__content',
this.reversed && this.variant == null ? 'hy-introduction__content--reversed' : '',
- this.imageUrl ? 'hy-introduction__content--with-image' : 'hy-introduction__content--without-image',
+ this.imageUrl || this.useSlot
+ ? 'hy-introduction__content--with-image'
+ : 'hy-introduction__content--without-image',
].join(' ');
const target = this.isExternal ? '_blank' : '_self';
@@ -78,11 +89,21 @@ export class HyIntroduction {
</div>
)}
</div>
- {this.imageUrl && (
- <div class="hy-introduction__image">
- <hy-image image-url={this.imageUrl} aspectRatioWidth={7} aspectRatioHeight={5} />
- </div>
- )}
+ {this.imageUrl &&
+ (this.sourceSet ? (
+ <div class="hy-introduction__image">
+ <hy-image
+ source-set={this.sourceSet}
+ image-url={this.imageUrl}
+ aspectRatioWidth={7}
+ aspectRatioHeight={5}
+ />
+ </div>
+ ) : (
+ <div class="hy-introduction__image">
+ <hy-image image-url={this.imageUrl} aspectRatioWidth={7} aspectRatioHeight={5} />
+ </div>
+ ))}
</div>
</hy-main-content-wrapper>
</div>
diff --git a/src/components/hy-introduction/readme.md b/src/components/hy-introduction/readme.md
index 50455ca34ab39281c191b60c5c81488b30800bc1..24b4d01b0de72f2e90b986563c4c0b11aad52027 100644
--- a/src/components/hy-introduction/readme.md
+++ b/src/components/hy-introduction/readme.md
@@ -4,18 +4,20 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------------- | ------------------ | ----------- | ------------------- | ----------- |
-| `headerstyle` | `headerstyle` | | `string` | `'common'` |
-| `imageUrl` | `image-url` | | `string` | `undefined` |
-| `isExternal` | `is-external` | | `boolean` | `false` |
-| `reversed` | `reversed` | | `boolean` | `false` |
-| `scLabel` | `sc-label` | | `string` | `undefined` |
-| `textDescription` | `text-description` | | `string` | `null` |
-| `textTitle` | `text-title` | | `string` | `undefined` |
-| `url` | `url` | | `string` | `undefined` |
-| `urlTitle` | `url-title` | | `string` | `undefined` |
-| `variant` | `variant` | | `"black" \| "blue"` | `null` |
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------ | ----------- | ------------------------- | ----------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `imageUrl` | `image-url` | | `string` | `undefined` |
+| `isExternal` | `is-external` | | `boolean` | `false` |
+| `reversed` | `reversed` | | `boolean` | `false` |
+| `scLabel` | `sc-label` | | `string` | `undefined` |
+| `sourceSet` | `source-set` | | `ImageSrcSet[] \| string` | `undefined` |
+| `textDescription` | `text-description` | | `string` | `null` |
+| `textTitle` | `text-title` | | `string` | `undefined` |
+| `url` | `url` | | `string` | `undefined` |
+| `urlTitle` | `url-title` | | `string` | `undefined` |
+| `useSlot` | `use-slot` | | `boolean` | `false` |
+| `variant` | `variant` | | `"black" \| "blue"` | `null` |
## Dependencies
diff --git a/src/components/hy-list-item/hy-list-item.tsx b/src/components/hy-list-item/hy-list-item.tsx
index babf98f967191afdd3d0c5cabb63bb7d27080003..38f5aa3da9f235494c47b01469f0912b9c595a96 100644
--- a/src/components/hy-list-item/hy-list-item.tsx
+++ b/src/components/hy-list-item/hy-list-item.tsx
@@ -35,6 +35,7 @@ export class HyListItem {
@Prop() scLabel?: string;
@Prop() itemImageUrl?: string;
@Prop() itemImageAlt?: string;
+ @Prop() disableLazy: boolean = false;
@Prop() relatedLinksBlockTitle?: string;
private _relatedLinks: RelatedLink[];
@Prop() relatedLinks?: RelatedLink[] | string;
@@ -242,6 +243,7 @@ export class HyListItem {
<div class={classImageContainerAttributes}>
<div class={classImageContainerImage}>
<img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
aria-hidden="true"
alt={this.itemImageAlt}
src={this.itemImageUrl}
diff --git a/src/components/hy-list-item/readme.md b/src/components/hy-list-item/readme.md
index 86ebf869dc8cf92af6e9aa1d4e6311b1c06cbf9e..971c44ad498a10bb0781fcb2612a85abf2a23a9e 100644
--- a/src/components/hy-list-item/readme.md
+++ b/src/components/hy-list-item/readme.md
@@ -7,6 +7,7 @@
| Property | Attribute | Description | Type | Default |
| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------- | -------------------------- |
| `additionalInfo` | `additional-info` | | `AdditionalInfo[] \| string` | `undefined` |
+| `disableLazy` | `disable-lazy` | | `boolean` | `false` |
| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `imageLabel` | `image-label` | | `string` | `undefined` |
| `isExternal` | `is-external` | | `boolean` | `false` |
diff --git a/src/components/hy-person-card/hy-person-card.tsx b/src/components/hy-person-card/hy-person-card.tsx
index 862a1a23d36f12119f949156a4402ac34f359259..b721784713f7f5d18f68bfe3fefa57179f2ab5fb 100644
--- a/src/components/hy-person-card/hy-person-card.tsx
+++ b/src/components/hy-person-card/hy-person-card.tsx
@@ -11,6 +11,7 @@ export class HyPersonCard {
@Prop() categoryTitle?: string;
@Prop() imageUrl?: string;
@Prop() imageAlt?: string;
+ @Prop() disableLazy: boolean = false;
@Prop() firstName?: string;
@Prop() lastName?: string;
@Prop() url?: string;
@@ -55,7 +56,12 @@ export class HyPersonCard {
<div class="hy-person-card__image-container">
{this.imageUrl ? (
<div class="hy-person-card__image-container__image">
- <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ aria-hidden="true"
+ src={this.imageUrl}
+ alt={this.imageAlt}
+ />
</div>
) : (
<div class="hy-person-card__image-container__no-image">
diff --git a/src/components/hy-person-card/readme.md b/src/components/hy-person-card/readme.md
index e89c3058ff5c949ec5f39645353173522b45079f..9837b3be916beeafb65a4df25aa4e6c6f9e3b119 100644
--- a/src/components/hy-person-card/readme.md
+++ b/src/components/hy-person-card/readme.md
@@ -8,6 +8,7 @@
| --------------- | ---------------- | ----------- | -------------------------------------------------------------- | ---------------------------- |
| `categoryTitle` | `category-title` | | `string` | `undefined` |
| `department` | `department` | | `string` | `undefined` |
+| `disableLazy` | `disable-lazy` | | `boolean` | `false` |
| `email` | `email` | | `string` | `undefined` |
| `field` | `field` | | `string` | `undefined` |
| `firstName` | `first-name` | | `string` | `undefined` |
diff --git a/src/components/hy-prominent-image/hy-prominent-image.tsx b/src/components/hy-prominent-image/hy-prominent-image.tsx
index 78c80618830e4b9aa0494f92c7ada7adf08bc697..373c61318a566ee37e7797d10097a1cb21673683 100644
--- a/src/components/hy-prominent-image/hy-prominent-image.tsx
+++ b/src/components/hy-prominent-image/hy-prominent-image.tsx
@@ -1,3 +1,10 @@
+export interface ImageSrcSet {
+ src: any;
+ media: string;
+ type: string;
+ sizes: string | null;
+}
+
import {Component, Element, Host, h, Prop} from '@stencil/core';
@Component({
@@ -9,6 +16,7 @@ export class HyProminentImage {
@Prop() textTitle?: string;
@Prop() imageUrl?: string;
@Prop() headerstyle: string = 'common';
+ @Prop() sourceSet: ImageSrcSet[] | string;
@Element() el: HTMLElement;
componentDidLoad() {
@@ -33,7 +41,12 @@ export class HyProminentImage {
<Host>
<div class={prominentImageClass}>
<div class="hy-prominent-image__image">
- <hy-image image-url={this.imageUrl} aspectRatioWidth={2} aspectRatioHeight={1} />
+ <hy-image
+ source-set={this.sourceSet}
+ image-url={this.imageUrl}
+ aspectRatioWidth={2}
+ aspectRatioHeight={1}
+ />
</div>
{this.textTitle && <div class={prominentImageText}>{this.textTitle}</div>}
</div>
diff --git a/src/components/hy-prominent-image/readme.md b/src/components/hy-prominent-image/readme.md
index 5bbcbd4918ccc402852ee649f2eb3265e8d734cf..d7f1740a3404e52287eff2c9c2edb2cbcb2cae08 100644
--- a/src/components/hy-prominent-image/readme.md
+++ b/src/components/hy-prominent-image/readme.md
@@ -4,11 +4,12 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------- | ------------- | ----------- | -------- | ----------- |
-| `headerstyle` | `headerstyle` | | `string` | `'common'` |
-| `imageUrl` | `image-url` | | `string` | `undefined` |
-| `textTitle` | `text-title` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | ------------------------- | ----------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `imageUrl` | `image-url` | | `string` | `undefined` |
+| `sourceSet` | `source-set` | | `ImageSrcSet[] \| string` | `undefined` |
+| `textTitle` | `text-title` | | `string` | `undefined` |
## Dependencies
diff --git a/src/components/hy-video/hy-video.tsx b/src/components/hy-video/hy-video.tsx
index 702809a668b5f86a27793b9ae4f24392375096ff..85e18d3d4aa2caa2bb88c58e62770005b4b71b52 100644
--- a/src/components/hy-video/hy-video.tsx
+++ b/src/components/hy-video/hy-video.tsx
@@ -40,6 +40,8 @@ export class HyVideo {
/** Use horizontal layout where metadata is on side */
@Prop() horizontal: boolean = false;
+ @Prop() disableLazy: boolean = false;
+
@Prop() headerstyle: string = 'default';
componentDidLoad() {
@@ -54,10 +56,20 @@ export class HyVideo {
renderPreviewWithLink = () => {
return this.linkToVideo ? (
<a title={this.videoTitle} href={this.linkToVideo} class="hy-video__link-to-video">
- <img class="hy-video__preview-image" src={this.previewImageUrl} alt={this.videoTitle} />
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ class="hy-video__preview-image"
+ src={this.previewImageUrl}
+ alt={this.videoTitle}
+ />
</a>
) : (
- <img class="hy-video__preview-image" src={this.previewImageUrl} alt={this.videoTitle} />
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ class="hy-video__preview-image"
+ src={this.previewImageUrl}
+ alt={this.videoTitle}
+ />
);
};
diff --git a/src/components/hy-video/readme.md b/src/components/hy-video/readme.md
index aed23da146a2142aa333dc209bdad3c974535fa9..7e04339d7f7582da3a14601729b0faed20b3baeb 100644
--- a/src/components/hy-video/readme.md
+++ b/src/components/hy-video/readme.md
@@ -10,6 +10,7 @@
| `contextLabelVisible` | `context-label-visible` | Should context label be visible | `boolean` | `false` |
| `dateAdded` | `date-added` | Date added date as string | `string` | `undefined` |
| `dateAddedLabel` | `date-added-label` | Label for date added | `string` | `undefined` |
+| `disableLazy` | `disable-lazy` | | `boolean` | `false` |
| `duration` | `duration` | Duration number | `string` | `undefined` |
| `durationLabel` | `duration-label` | Label for duration number | `string` | `undefined` |
| `headerstyle` | `headerstyle` | | `string` | `'default'` |
diff --git a/src/components/image/image.scss b/src/components/image/image.scss
index 000b8510d29c1b7b412fcb2b50040da41ac267a9..1e0d3eeb184bac2bdb3b462c2a7e5e2170aaee2f 100644
--- a/src/components/image/image.scss
+++ b/src/components/image/image.scss
@@ -14,7 +14,7 @@
padding-top: var(--aspectRatio);
}
- > img {
+ img {
bottom: 0;
height: 100%;
left: 0;
diff --git a/src/components/image/image.spec.tsx b/src/components/image/image.spec.tsx
index 236f8c6729b2d9dff46a0bff2c6d77ed29583d82..d7284f33f9c0224fbde5ecc2d9f6c303436ce18b 100644
--- a/src/components/image/image.spec.tsx
+++ b/src/components/image/image.spec.tsx
@@ -5,13 +5,13 @@ describe('image', () => {
it('renders', async () => {
const page = await newSpecPage({
components: [Image],
- html: `<hy-image></hy-image>`,
+ html: `<hy-image image-url="foobar"></hy-image>`,
});
expect(page.root).toEqualHtml(`
- <hy-image>
+ <hy-image image-url="foobar">
<div class="hy-image">
<div class="hy-image__image-container" style="--aspectRatio: 56.25%;">
- <img class="hy-image__image">
+ <img class="hy-image__image" loading="lazy" src="foobar">
</div>
</div>
<hy-box mb="1.75, 1.75, 2, 2.5"></hy-box>
diff --git a/src/components/image/image.tsx b/src/components/image/image.tsx
index e499114bd76998d8d04142a05cae5ff8edcc9d31..103fbb4079ff0e3de9f7846654478903f1fdd803 100644
--- a/src/components/image/image.tsx
+++ b/src/components/image/image.tsx
@@ -1,4 +1,11 @@
-import {Component, ComponentInterface, Prop, h} from '@stencil/core';
+export interface ImageSrcSet {
+ src: any;
+ media: string;
+ type: string;
+ sizes: string | null;
+}
+
+import {Component, ComponentInterface, Prop, h, Watch} from '@stencil/core';
@Component({
tag: 'hy-image',
@@ -6,11 +13,22 @@ import {Component, ComponentInterface, Prop, h} from '@stencil/core';
shadow: false,
})
export class Image implements ComponentInterface {
- @Prop() imageUrl?: string;
+ @Prop() imageUrl: string = null;
@Prop() imageAlt: string = null;
+ @Prop() disableLazy: boolean = false;
@Prop() caption: string = null;
@Prop() aspectRatioWidth: number = 16;
@Prop() aspectRatioHeight: number = 9;
+ private _sourceSet: ImageSrcSet[];
+ @Prop() sourceSet: ImageSrcSet[] | string;
+
+ @Watch('sourceSet') srcSetWatcher(data: ImageSrcSet[] | string) {
+ this._sourceSet = typeof data === 'string' ? JSON.parse(data) : data;
+ }
+
+ componentWillLoad() {
+ this.srcSetWatcher(this.sourceSet);
+ }
render() {
const classAttributes = ['hy-image', this.caption ? 'hy-image--with-caption' : null].join(' ');
@@ -22,7 +40,27 @@ export class Image implements ComponentInterface {
return [
<div class={classAttributes}>
<div class="hy-image__image-container" style={aspectRatio}>
- <img alt={this.imageAlt} class="hy-image__image" src={this.imageUrl} />
+ {this.imageUrl &&
+ (this._sourceSet ? (
+ <picture>
+ {this._sourceSet.map((item) => (
+ <source srcSet={item.src} media={item.media} type={item.type} sizes={item.sizes ? item.sizes : ''} />
+ ))}
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ alt={this.imageAlt}
+ class="hy-image__image"
+ src={this.imageUrl}
+ />
+ </picture>
+ ) : (
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ alt={this.imageAlt}
+ class="hy-image__image"
+ src={this.imageUrl}
+ />
+ ))}
</div>
{this.caption && <div class="hy-image__caption">{this.caption}</div>}
</div>,
diff --git a/src/components/image/readme.md b/src/components/image/readme.md
index 8d1c01dae4a8f901af83d5cb4b29c6a36b22cc08..4e2466236702af986476d9fa6865ee03da9c876b 100644
--- a/src/components/image/readme.md
+++ b/src/components/image/readme.md
@@ -26,13 +26,15 @@ Defaults to 16/9 aspect ratio if none is provided. Caption is optional.
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------- | --------------------- | ----------- | -------- | ----------- |
-| `aspectRatioHeight` | `aspect-ratio-height` | | `number` | `9` |
-| `aspectRatioWidth` | `aspect-ratio-width` | | `number` | `16` |
-| `caption` | `caption` | | `string` | `null` |
-| `imageAlt` | `image-alt` | | `string` | `null` |
-| `imageUrl` | `image-url` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------------- | --------------------- | ----------- | ------------------------- | ----------- |
+| `aspectRatioHeight` | `aspect-ratio-height` | | `number` | `9` |
+| `aspectRatioWidth` | `aspect-ratio-width` | | `number` | `16` |
+| `caption` | `caption` | | `string` | `null` |
+| `disableLazy` | `disable-lazy` | | `boolean` | `false` |
+| `imageAlt` | `image-alt` | | `string` | `null` |
+| `imageUrl` | `image-url` | | `string` | `null` |
+| `sourceSet` | `source-set` | | `ImageSrcSet[] \| string` | `undefined` |
## Dependencies
diff --git a/src/components/link-box-list/link-box-list.tsx b/src/components/link-box-list/link-box-list.tsx
index 7cee12691b18621842787fbec3d770af80b012bc..b502cac4ae944c5d46e4e9929d8af6e0e77b93f8 100644
--- a/src/components/link-box-list/link-box-list.tsx
+++ b/src/components/link-box-list/link-box-list.tsx
@@ -1,6 +1,7 @@
export interface LinkBox {
heading: string;
description: string;
+ imageSets: string | null;
imageUrl: string;
imageAlt: string;
boxUrl: string;
@@ -86,6 +87,7 @@ export class LinkBoxList implements ComponentInterface {
<hy-link-box
class={classItemAttributes}
variant={this.variant}
+ source-set={x.imageSets}
image-url={x.imageUrl}
image-alt={x.imageAlt}
text-title={x.heading}
diff --git a/src/components/link-box/link-box.scss b/src/components/link-box/link-box.scss
index e82e7997a8a5762ecd8475a4db0787f91c4f0aea..a1f3824294cfe39cea9d16134d80154e2e15e3ed 100644
--- a/src/components/link-box/link-box.scss
+++ b/src/components/link-box/link-box.scss
@@ -109,7 +109,7 @@
width: 100%;
}
- > img {
+ img {
bottom: 0;
height: 100%;
left: 0;
diff --git a/src/components/link-box/link-box.tsx b/src/components/link-box/link-box.tsx
index 7a7f04b761352a172653f0c9df4f92dcaf8488d2..91f4d0d686307f433fe81f85a12a1dabb48020dd 100644
--- a/src/components/link-box/link-box.tsx
+++ b/src/components/link-box/link-box.tsx
@@ -1,4 +1,11 @@
-import {Component, ComponentInterface, Element, Prop, h, Listen} from '@stencil/core';
+export interface ImageSrcSet {
+ src: any;
+ media: string;
+ type: string;
+ sizes: string | null;
+}
+
+import {Component, ComponentInterface, Element, Prop, h, Listen, Watch} from '@stencil/core';
import {LinkBoxVariants} from '../../utils/utils';
let keys = {
@@ -14,14 +21,26 @@ export class LinkBox implements ComponentInterface {
@Prop() variant: LinkBoxVariants = LinkBoxVariants.default;
@Prop() imageUrl: string = null;
@Prop() imageAlt: string = null;
+ @Prop() disableLazy: boolean = false;
+ @Prop() useSlot: boolean = false;
@Prop() textTitle?: string;
@Prop() textDescription: string = null;
@Prop() url?: string;
@Prop() isExternal: boolean = false;
@Prop() scLabel?: string;
@Prop() headerstyle: string = 'common';
+ private _sourceSet: ImageSrcSet[];
+ @Prop() sourceSet: ImageSrcSet[] | string;
@Element() el: HTMLElement;
+ @Watch('sourceSet') srcSetWatcher(data: ImageSrcSet[] | string) {
+ this._sourceSet = typeof data === 'string' ? JSON.parse(data) : data;
+ }
+
+ componentWillLoad() {
+ this.srcSetWatcher(this.sourceSet);
+ }
+
componentDidLoad() {
let hyMainDiv = this.el.closest('.hy-main');
if (hyMainDiv) {
@@ -131,11 +150,36 @@ export class LinkBox implements ComponentInterface {
return [
<article class={classContainerAttributes} tabindex="0" data-target={target} data-location={this.url}>
<div class={classAttributes} aria-label={this.scLabel}>
- {this.imageUrl && (
- <div class="hy-link-box__image-container" style={aspectRatio}>
- <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
- </div>
- )}
+ {this.imageUrl &&
+ (this._sourceSet ? (
+ <div class="hy-link-box__image-container" style={aspectRatio}>
+ <picture>
+ {this._sourceSet.map((item) => (
+ <source
+ srcSet={item.src}
+ media={item.media}
+ type={item.type}
+ sizes={item.sizes ? item.sizes : ''}
+ />
+ ))}
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ aria-hidden="true"
+ src={this.imageUrl}
+ alt={this.imageAlt}
+ />
+ </picture>
+ </div>
+ ) : (
+ <div class="hy-link-box__image-container" style={aspectRatio}>
+ <img
+ loading={this.disableLazy ? 'eager' : 'lazy'}
+ aria-hidden="true"
+ src={this.imageUrl}
+ alt={this.imageAlt}
+ />
+ </div>
+ ))}
<div class={classTextContainer}>
<h3 class={classTitle} innerHTML={this.textTitle}></h3>
{this.textDescription && <div class={classDescription}>{this.textDescription}</div>}
diff --git a/src/components/link-box/readme.md b/src/components/link-box/readme.md
index cdc8ec84954b3f8c04d2bca52c386a34e349dc43..be42730019ecf664336a7f4bfa3b33be7babe0d8 100644
--- a/src/components/link-box/readme.md
+++ b/src/components/link-box/readme.md
@@ -6,14 +6,17 @@
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------- | -------------------------------------------------------- | ------------------------- |
+| `disableLazy` | `disable-lazy` | | `boolean` | `false` |
| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `imageAlt` | `image-alt` | | `string` | `null` |
| `imageUrl` | `image-url` | | `string` | `null` |
| `isExternal` | `is-external` | | `boolean` | `false` |
| `scLabel` | `sc-label` | | `string` | `undefined` |
+| `sourceSet` | `source-set` | | `ImageSrcSet[] \| string` | `undefined` |
| `textDescription` | `text-description` | | `string` | `null` |
| `textTitle` | `text-title` | | `string` | `undefined` |
| `url` | `url` | | `string` | `undefined` |
+| `useSlot` | `use-slot` | | `boolean` | `false` |
| `variant` | `variant` | | `LinkBoxVariants.default \| LinkBoxVariants.landingPage` | `LinkBoxVariants.default` |
## Dependencies
diff --git a/src/fonts/fonts.css b/src/fonts/fonts.css
index 7ad3c29aed7a09af70c3df72657a45b92920dde9..5d5e1aeb9b7caa56d471d5b55c26e96fd2d5c2b2 100644
--- a/src/fonts/fonts.css
+++ b/src/fonts/fonts.css
@@ -1,49 +1,44 @@
@font-face {
- font-family: "Open Sans";
+ font-family: 'Open Sans';
+ font-display: swap;
font-weight: 400;
font-style: normal;
- src: url("./Open-Sans-regular/Open-Sans-regular.eot");
- src: url("./Open-Sans-regular/Open-Sans-regular.eot?#iefix")
- format("embedded-opentype"),
- local("Open Sans"), local("Open-Sans-regular"),
- url("./Open-Sans-regular/Open-Sans-regular.ttf") format("truetype"),
- url("./Open-Sans-regular/Open-Sans-regular.woff2") format("woff2"),
- url("./Open-Sans-regular/Open-Sans-regular.woff") format("woff"),
- url("./Open-Sans-regular/Open-Sans-regular.svg#OpenSans") format("svg");
+ src: url('./Open-Sans-regular/Open-Sans-regular.eot');
+ src: url('./Open-Sans-regular/Open-Sans-regular.eot?#iefix') format('embedded-opentype'), local('Open Sans'),
+ local('Open-Sans-regular'), url('./Open-Sans-regular/Open-Sans-regular.ttf') format('truetype'),
+ url('./Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'),
+ url('./Open-Sans-regular/Open-Sans-regular.woff') format('woff'),
+ url('./Open-Sans-regular/Open-Sans-regular.svg#OpenSans') format('svg');
}
@font-face {
- font-family: "Open Sans";
+ font-family: 'Open Sans';
+ font-display: swap;
font-weight: 600;
font-style: normal;
- src: url("./Open-Sans-600/Open-Sans-600.eot");
- src: url("./Open-Sans-600/Open-Sans-600.eot?#iefix")
- format("embedded-opentype"),
- local("Open Sans Semibold"), local("Open-Sans-600"),
- url("./Open-Sans-600/Open-Sans-600.ttf") format("truetype"),
- url("./Open-Sans-600/Open-Sans-600.woff2") format("woff2"),
- url("./Open-Sans-600/Open-Sans-600.woff") format("woff"),
- url("./Open-Sans-600/Open-Sans-600.svg#OpenSans") format("svg");
+ src: url('./Open-Sans-600/Open-Sans-600.eot');
+ src: url('./Open-Sans-600/Open-Sans-600.eot?#iefix') format('embedded-opentype'), local('Open Sans Semibold'),
+ local('Open-Sans-600'), url('./Open-Sans-600/Open-Sans-600.ttf') format('truetype'),
+ url('./Open-Sans-600/Open-Sans-600.woff2') format('woff2'), url('./Open-Sans-600/Open-Sans-600.woff') format('woff'),
+ url('./Open-Sans-600/Open-Sans-600.svg#OpenSans') format('svg');
}
@font-face {
- font-family: "Open Sans";
+ font-family: 'Open Sans';
+ font-display: swap;
font-weight: 700;
font-style: normal;
- src: url("./Open-Sans-700/Open-Sans-700.eot");
- src: url("./Open-Sans-700/Open-Sans-700.eot?#iefix")
- format("embedded-opentype"),
- local("Open Sans Bold"), local("Open-Sans-700"),
- url("./Open-Sans-700/Open-Sans-700.ttf") format("truetype"),
- url("./Open-Sans-700/Open-Sans-700.woff2") format("woff2"),
- url("./Open-Sans-700/Open-Sans-700.woff") format("woff"),
- url("./Open-Sans-700/Open-Sans-700.svg#OpenSans") format("svg");
+ src: url('./Open-Sans-700/Open-Sans-700.eot');
+ src: url('./Open-Sans-700/Open-Sans-700.eot?#iefix') format('embedded-opentype'), local('Open Sans Bold'),
+ local('Open-Sans-700'), url('./Open-Sans-700/Open-Sans-700.ttf') format('truetype'),
+ url('./Open-Sans-700/Open-Sans-700.woff2') format('woff2'), url('./Open-Sans-700/Open-Sans-700.woff') format('woff'),
+ url('./Open-Sans-700/Open-Sans-700.svg#OpenSans') format('svg');
}
:root {
--base-font-size: 16px;
--base-font-size-mobile: 14px;
- --main-font-family: "Open Sans", Helvetica, Arial, sans-serif;
+ --main-font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
* {