<div class="wrapper">
<div class="glider-contain-course">
<div class="glider js-glider-course">
<div class="glider-slide glider-slide--course">
<div class="row flex-column-reverse flex-lg-row">
<div class="grid-18 grid-lg-8">
<div class="u-m-b-2">
<div class="a-meta">Introduktion</div>
<h1>Känn igen ett bluffmejl</h1>
<div class="a-meta a-meta--lowercase">
<svg class="icon">
<use xlink:href="#icon-read"></use>
</svg>
3 min läsning
</div>
</div>
<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
<div id="slide-1-ImageContainerMobile"></div>
<nav class="glider-slide__navigation">
<button type="button" class="a-button a-button--icon a-button--jade-light glider-course-next js-glider-next">
<span class="a-button__text">Starta kursen</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-forwards"></use>
</svg>
</button>
</nav>
</div>
<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-1-ImageContainer">
<div class="wp-block-image" data-responsive="xs:slide-1-ImageContainerMobile,lg:slide-1-ImageContainer">
<figure class="size-large glider-slide__media js-zoom">
<img src="/assets/images/hero.jpg" alt="kursbild" class="u-border-radius">
</figure>
</div>
</div>
</div>
</div>
<div class="glider-slide glider-slide--course">
<div class="row flex-column-reverse flex-lg-row">
<div class="grid-18 grid-lg-8">
<div class="u-m-b-2">
<div class="a-meta a-meta--wrap">
Känn igen ett bluffmejl - Steg 1 av 3
</div>
<h2 class="alpha">Varför får man bluffmelj?</h2>
</div>
<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
<div id="slide-2-ImageContainerMobile"></div>
<nav class="glider-slide__navigation">
<button type="button" class="a-button a-button--icon a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev">
<span class="a-button__text">Gå bakåt</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-backwards"></use>
</svg>
</button>
<button type="button" class="a-button a-button--icon a-button--peacock-light glider-course-next js-glider-next">
<span class="a-button__text">Gå framåt</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-forwards"></use>
</svg>
</button>
</nav>
</div>
<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-2-ImageContainer">
<div class="wp-block-image" data-responsive="xs:slide-2-ImageContainerMobile,lg:slide-2-ImageContainer">
<figure class="size-large glider-slide__media js-zoom zoom">
<figcaption class="u-m-b-1">Exempel på bluffmejl</figcaption>
<img src="/assets/images/bluffmejl.png" alt="kursbild" class="u-border-radius">
</figure>
</div>
</div>
</div>
</div>
<div class="glider-slide glider-slide--course">
<div class="row flex-column-reverse flex-lg-row">
<div class="grid-18 grid-lg-8">
<div class="u-m-b-2">
<div class="a-meta a-meta--wrap">
Känn igen ett bluffmejl - Steg 2 av 3
</div>
<h2 class="alpha">Hur känner man igen ett bluffmejl?</h2>
</div>
<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
<div id="slide-3-ImageContainerMobile"></div>
<nav class="glider-slide__navigation">
<button type="button" class="a-button a-button--icon a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev">
<span class="a-button__text">Gå bakåt</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-backwards"></use>
</svg>
</button>
<button type="button" class="a-button a-button--icon a-button--peacock-light glider-course-next js-glider-next">
<span class="a-button__text">Gå framåt</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-forwards"></use>
</svg>
</button>
</nav>
</div>
<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-3-ImageContainer">
<div class="wp-block-image" data-responsive="xs:slide-3-ImageContainerMobile,lg:slide-3-ImageContainer">
<figure class="glider-slide__media">
<figcaption class="u-m-b-1">Se filmen om bluffmejl</figcaption>
<div class="m-icon-overlay m-card__image m-card__media" data-youtube="n8hPhZwV8a0">
<button type="button" class="m-icon-overlay__button" aria-label="play">
<svg class="icon m-icon-overlay__icon">
<use xlink:href="#icon-play"></use>
</svg>
</button>
<img src="https://i3.ytimg.com/vi/n8hPhZwV8a0/maxresdefault.jpg" alt="video"><iframe frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/n8hPhZwV8a0?playsinline=1&rel=0&widget_referrer=http%3A%2F%2Flocalhost%3A3000%2Fcomponents%2Fdetail%2Fcard--with-youtube-video&enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A3000&widgetid=1" id="widget2"></iframe>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="glider-slide glider-slide--course">
<div class="row flex-column-reverse flex-lg-row">
<div class="grid-18 grid-lg-8">
<div class="u-m-b-2">
<div class="a-meta a-meta--wrap">
Känn igen ett bluffmejl - Steg 3 av 3
</div>
<h2 class="alpha">Bra, nu kan du känna igen ett bluffmejl!</h2>
</div>
<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
<div id="slide-4-ImageContainerMobile"></div>
<form>
<fieldset class="a-rating u-m-b-2">
<legend>Vad tyckte du om kursen?</legend>
<input type="radio" name="rating" value="5" class="a-rating__radio" id="rating-5">
<label for="rating-5" class="a-rating__label"><span class="u-visuallyhidden">betyg 5 av 5</span></label>
<input type="radio" name="rating" value="4" class="a-rating__radio" id="rating-4">
<label for="rating-4" class="a-rating__label "><span class="u-visuallyhidden">betyg 4 av 5</span></label>
<input type="radio" name="rating" value="3" class="a-rating__radio" id="rating-3">
<label for="rating-3" class="a-rating__label "><span class="u-visuallyhidden">betyg 3 av 5</span></label>
<input type="radio" name="rating" value="2" class="a-rating__radio" id="rating-2">
<label for="rating-2" class="a-rating__label "><span class="u-visuallyhidden">betyg 2 av 5</span></label>
<input type="radio" name="rating" value="1" class="a-rating__radio" id="rating-1">
<label for="rating-1" class="a-rating__label "><span class="u-visuallyhidden">betyg 1 av 5</span></label>
</fieldset>
</form>
<nav class="glider-slide__navigation">
<button type="button" class="a-button a-button--icon a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev">
<span class="a-button__text">Gå bakåt</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-backwards"></use>
</svg>
</button>
<a href="#" class="a-button a-button--icon a-button--jade-light">
<span class="a-button__text">Avsluta kursen</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-check"></use>
</svg>
</a>
</nav>
</div>
<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-4-ImageContainer">
<div class="wp-block-image" data-responsive="xs:slide-4-ImageContainerMobile,lg:slide-4-ImageContainer">
<figure class="size-large glider-slide__media js-zoom">
<img src="/assets/images/ALX_0876.jpg" alt="kursbild" class="u-border-radius">
</figure>
</div>
</div>
</div>
<div class="row u-p-t-2 u-m-t-3 u-b-t-1 u-b-b-0 u-b-x-0 u-b-solid u-b-concrete">
<div class="grid">
<div class="m-share">
<button type="button" class="a-button a-button--transparent a-button--icon m-share__button" data-a11y-toggle="share-platforms">
<span class="a-button__text">Dela</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-share"></use>
</svg>
</button>
<div class="m-share__platforms" aria-hidden="true" id="share-platforms">
<a href="http://facebook.com/sharer/sharer.php?u=/&title=" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
<span class="a-button__text"></span>
<svg class="icon icon-facebook">
<use xlink:href="#icon-facebook"></use>
</svg>
</a>
<a href="https://twitter.com/intent/tweet?url=/&text=" type="button" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
<span class="a-button__text"></span>
<svg class="icon icon-x">
<use xlink:href="#icon-x"></use>
</svg>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=/&title=" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
<span class="a-button__text"></span>
<svg class="icon icon-linkedin">
<use xlink:href="#icon-linkedin"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="glider-contain-course">
<div class="glider{{#if single}} js-glider-course{{else}} js-glider{{/if}}">
<div class="glider-slide glider-slide--course">
<div class="row flex-column-reverse flex-lg-row">
<div class="grid-18 grid-lg-8">
<div class="u-m-b-2">
{{>@meta text="Introduktion"}}
<h1>Känn igen ett bluffmejl</h1>
<div class="a-meta a-meta--lowercase">
<svg class="icon">
<use xlink:href="#icon-read"></use>
</svg>
3 min läsning
</div>
</div>
<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
<div id="slide-1-ImageContainerMobile"></div>
<nav class="glider-slide__navigation">
{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--icon a-button--jade-light glider-course-next js-glider-next" text="Starta kursen"}}
</nav>
</div>
<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-1-ImageContainer">
<div class="wp-block-image" data-responsive="xs:slide-1-ImageContainerMobile,lg:slide-1-ImageContainer">
<figure class="size-large glider-slide__media js-zoom">
<img src="/assets/images/hero.jpg" alt="kursbild" class="u-border-radius">
</figure>
</div>
</div>
</div>
</div>
<div class="glider-slide glider-slide--course">
<div class="row flex-column-reverse flex-lg-row">
<div class="grid-18 grid-lg-8">
<div class="u-m-b-2">
<div class="a-meta a-meta--wrap">
Känn igen ett bluffmejl - Steg 1 av 3
</div>
<h2 class="alpha">Varför får man bluffmelj?</h2>
</div>
<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
<div id="slide-2-ImageContainerMobile"></div>
<nav class="glider-slide__navigation">
{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev" text="Gå bakåt"}}
{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--icon a-button--peacock-light glider-course-next js-glider-next" text="Gå framåt" }}
</nav>
</div>
<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-2-ImageContainer">
<div class="wp-block-image" data-responsive="xs:slide-2-ImageContainerMobile,lg:slide-2-ImageContainer">
<figure class="size-large glider-slide__media js-zoom zoom">
<figcaption class="u-m-b-1">Exempel på bluffmejl</figcaption>
<img src="/assets/images/bluffmejl.png" alt="kursbild" class="u-border-radius">
</figure>
</div>
</div>
</div>
</div>
<div class="glider-slide glider-slide--course">
<div class="row flex-column-reverse flex-lg-row">
<div class="grid-18 grid-lg-8">
<div class="u-m-b-2">
<div class="a-meta a-meta--wrap">
Känn igen ett bluffmejl - Steg 2 av 3
</div>
<h2 class="alpha">Hur känner man igen ett bluffmejl?</h2>
</div>
<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
<div id="slide-3-ImageContainerMobile"></div>
<nav class="glider-slide__navigation">
{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev" text="Gå bakåt"}}
{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--icon a-button--peacock-light glider-course-next js-glider-next" text="Gå framåt"}}
</nav>
</div>
<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-3-ImageContainer">
<div class="wp-block-image" data-responsive="xs:slide-3-ImageContainerMobile,lg:slide-3-ImageContainer">
<figure class="glider-slide__media">
<figcaption class="u-m-b-1">Se filmen om bluffmejl</figcaption>
<div class="m-icon-overlay m-card__image m-card__media" data-youtube="n8hPhZwV8a0">
<button type="button" class="m-icon-overlay__button" aria-label="play">
<svg class="icon m-icon-overlay__icon">
<use xlink:href="#icon-play"></use>
</svg>
</button>
<img src="https://i3.ytimg.com/vi/n8hPhZwV8a0/maxresdefault.jpg" alt="video"><iframe frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/n8hPhZwV8a0?playsinline=1&rel=0&widget_referrer=http%3A%2F%2Flocalhost%3A3000%2Fcomponents%2Fdetail%2Fcard--with-youtube-video&enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A3000&widgetid=1" id="widget2"></iframe>
</div>
</figure>
</div>
</div>
</div>
</div>
<div class="glider-slide glider-slide--course">
<div class="row flex-column-reverse flex-lg-row">
<div class="grid-18 grid-lg-8">
<div class="u-m-b-2">
<div class="a-meta a-meta--wrap">
Känn igen ett bluffmejl - Steg 3 av 3
</div>
<h2 class="alpha">Bra, nu kan du känna igen ett bluffmejl!</h2>
</div>
<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
<div id="slide-4-ImageContainerMobile"></div>
{{> @rating additional_classes='u-m-b-2'}}
<nav class="glider-slide__navigation">
{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev" text="Gå bakåt"}}
{{> @button el="a" url="#" additional_classes="a-button--icon a-button--jade-light" icon="check" text="Avsluta kursen"}}
</nav>
</div>
<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-4-ImageContainer">
<div class="wp-block-image" data-responsive="xs:slide-4-ImageContainerMobile,lg:slide-4-ImageContainer">
<figure class="size-large glider-slide__media js-zoom">
<img src="/assets/images/ALX_0876.jpg" alt="kursbild" class="u-border-radius">
</figure>
</div>
</div>
</div>
<div class="row u-p-t-2 u-m-t-3 u-b-t-1 u-b-b-0 u-b-x-0 u-b-solid u-b-concrete">
<div class="grid">
{{> @share}}
</div>
</div>
</div>
</div>
</div>
</div>
{
"dots": false,
"single": true
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;
// NOTE: this compnent is dependant on the glider.scss component
// The Glider components is dependant on JS-classes and is therefore not namespaced
.glider-contain-course {
display: flex;
position: relative;
align-items: center;
margin-top: 0;
margin-bottom: func.rhythm(2);
padding-left: 0;
padding-right: 0;
}
.glider-slide {
@include bem.m(course) {
margin-left: 0;
padding-left: 0;
padding-right: 0;
&::after {
display: none;
}
@include bem.e(navigation) {
display: flex;
justify-content: space-between;
@include breakpoint.bp-up(lg) {
justify-content: flex-start;
}
}
@include bem.e(media) {
&.zoom {
pointer-events: none;
@include breakpoint.bp-up(lg) {
pointer-events: auto;
cursor: zoom-in;
transition: all 0.15s ease-out;
position: relative;
&::after {
content: 'Förstora bilden';
color: colors.$color-snow;
padding: func.rhythm(1) func.rhythm(2) func.rhythm(1) func.rhythm(4);
display: block;
position: absolute;
top: 0;
left: 0;
border-top-left-radius: var.$border-radius;
border-bottom-right-radius: var.$border-radius;
width: auto;
line-height: 1;
height: var.$icon-size-large * 1.4;
background-color: rgba(colors.$color-cyberspace, 0.8);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-search' viewbox='0 0 32 32' width='32' height='32' fill='%23ffffff'%3E%3Cpath d='M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z'/%3E%3C/svg%3E");
background-position: func.rhythm(1) center;
background-size: var.$icon-size-medium var.$icon-size-medium;
background-repeat: no-repeat;
}
img {
transition: all 0.25s ease-out;
}
// Image zooming
&.is-zoomed {
cursor: zoom-out !important;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: func.z_index(foreground);
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(colors.$color-cyberspace, 0.8);
flex-direction: column;
&::after {
display: none;
}
img {
cursor: zoom-out;
max-width: 100%;
max-height: 100vh;
padding: func.rhythm(1);
height: auto;
}
figcaption {
max-width: func.to_rem(612px);
text-align: center;
color: colors.$color-snow;
padding-left: func.rhythm(2);
padding-right: func.rhythm(2);
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
}
}
figcaption {
margin-top: func.rhythm(1);
}
@include breakpoint.bp-up(lg) {
display: flex;
flex-direction: column-reverse;
margin-top: 0;
}
}
}
}
@charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/baseline/plumber' as plumber;
// NOTE: this compnent is dependant on the glider.scss component
// The Glider components is dependant on JS-classes and is therefore not namespaced
.glider-hero-contain {
display: flex;
position: relative;
align-items: center;
margin: 0;
@include bem.e(text) {
position: absolute;
top: func.rhythm(2);
left: func.rhythm(2);
z-index: func.z_index(background);
padding-right: func.rhythm(2);
max-width: 95%;
@include breakpoint.bp-up(sm-xs) {
top: func.rhythm(3);
left: func.rhythm(3);
padding-right: func.rhythm(3);
max-width: 90%;
}
@include breakpoint.bp-up(sm) {
top: func.rhythm(4);
left: func.rhythm(4);
padding-right: func.rhythm(4);
max-width: 80%;
}
@include breakpoint.bp-up(md) {
top: func.rhythm(6);
left: func.rhythm(6);
padding-right: func.rhythm(6);
max-width: 70%;
}
@include breakpoint.bp-up(lg) {
top: func.rhythm(7);
left: func.rhythm(7);
padding-right: 0;
max-width: 60%;
}
@include breakpoint.bp-up(xl) {
top: func.rhythm(8);
left: func.rhythm(8);
}
> h1 {
color: colors.$color-snow;
> span {
background-color: rgba(0,0,0,0.6);
}
@include plumber.plumber(
$font-size: 2,
$line-height: 3,
$leading-bottom: 1
);
@include breakpoint.bp-up(sm) {
@include plumber.plumber(
$font-size: 2.3,
$line-height: 3,
$leading-bottom: 1
);
}
@include breakpoint.bp-up(md) {
@include plumber.plumber(
$font-size: 3,
$line-height: 4,
$leading-bottom: 2
);
}
@include breakpoint.bp-up(lg) {
@include plumber.plumber(
$font-size: 4,
$line-height: 5,
$leading-bottom: 2
);
}
@include breakpoint.bp-up(xl) {
@include plumber.plumber(
$font-size: 5,
$line-height: 6,
$leading-bottom: 3
);
}
}
> p {
color: colors.$color-snow;
> span {
background-color: rgba(0,0,0,0.6);
}
@include plumber.plumber(
$font-size: 1.5,
$line-height: 2,
);
@include breakpoint.bp-up(sm) {
@include plumber.plumber(
$font-size: 2,
$line-height: 3,
);
}
@include breakpoint.bp-up(lg) {
@include plumber.plumber(
$font-size: 2.5,
$line-height: 3,
);
}
@include breakpoint.bp-up(xl) {
@include plumber.plumber(
$font-size: 3,
$line-height: 4,
);
}
}
}
.glider {
visibility: hidden;
&[data-glider-initialized="true"] {
visibility: visible;
}
}
}
.glider-slide {
width: 100vw;
@include bem.m(hero) {
margin: 0;
padding: 0;
position: relative;
&::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(colors.$color-black, 0) 35%, rgba(colors.$color-black, 1) 100%);
}
@include bem.e(image) {
display: block;
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
@include breakpoint.bp-up(sm) {
min-height: func.to_rem(500px);
max-height: 75vh;
}
}
@include bem.e(text) {
position: absolute;
z-index: 1;
bottom: func.rhythm(2);
left: func.rhythm(2);
padding-right: func.rhythm(2);
color: colors.$color-snow;
font-family: var.$font-family-bold;
max-width: 95%;
> span {
//text-shadow: 0 0 20px rgba(0,0,0,0.8);
> a {
position: relative;
z-index: 1;
&:hover {
text-decoration: none;
color: colors.$color-cyberspace !important;
text-shadow: none;
}
&::before {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: colors.$color-snow;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
}
&:hover::before {
transform-origin: left;
transform: scaleX(1);
}
}
}
@include plumber.plumber(
$font-size: 2.3,
$line-height: 3,
$leading-bottom: 0,
$baseline: var.$headings-baseline
);
@include breakpoint.bp-up(sm-xs) {
bottom: func.rhythm(3);
left: func.rhythm(3);
padding-right: func.rhythm(3);
max-width: 90%;
@include plumber.plumber(
$font-size: 3,
$line-height: 4,
$leading-bottom: 0
);
}
@include breakpoint.bp-up(sm) {
bottom: func.rhythm(4);
left: func.rhythm(4);
padding-right: func.rhythm(4);
max-width: 80%;
@include plumber.plumber(
$font-size: 4,
$line-height: 5,
$leading-bottom: 0
);
}
@include breakpoint.bp-up(md) {
bottom: func.rhythm(6);
left: func.rhythm(6);
padding-right: func.rhythm(6);
max-width: 70%;
@include plumber.plumber(
$font-size: 5,
$line-height: 6,
$leading-bottom: 0
);
}
@include breakpoint.bp-up(lg) {
bottom: func.rhythm(7);
left: func.rhythm(7);
padding-right: 0;
max-width: 60%;
@include plumber.plumber(
$font-size: 6,
$line-height: 8,
$leading-bottom: 0
);
}
@include breakpoint.bp-up(xl) {
bottom: func.rhythm(8);
left: func.rhythm(8);
@include plumber.plumber(
$font-size: 7,
$line-height: 9,
$leading-bottom: 0
);
}
}
}
}
.glider-nav {
transform: scale(0.7) translateY(-100%);
@include breakpoint.bp-up(md) {
transform: scale(1) translateY(-50%);
}
@include bem.m(hero) {
&.disabled {
display: none;
}
&.glider-prev {
left: 0;
@include breakpoint.bp-up(md) {
left: func.rhythm(1);
}
@include breakpoint.bp-up(lg) {
left: func.rhythm(2);
}
}
&.glider-next {
right: 0;
@include breakpoint.bp-up(md) {
right: func.rhythm(1);
}
@include breakpoint.bp-up(lg) {
right: func.rhythm(2);
}
}
}
}
@charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;
// The Glider components is dependant on JS-classes and is therefore not namespaced
.glider-contain {
display: flex;
position: relative;
align-items: center;
margin-top: func.rhythm(2);
margin-bottom: func.rhythm(2);
padding-right: func.rhythm(8);
padding-left: func.rhythm(8);
}
.glider {
position: relative;
margin: 0 auto;
overflow: hidden;
//transform: translateZ(0);
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
&.draggable {
cursor: grab;
user-select: none;
@include bem.b(glider-slide) {
img {
pointer-events: none;
user-select: none;
}
}
}
&.drag {
cursor: -webkit-grabbing;
cursor: grabbing;
}
}
.glider-track {
display: flex;
z-index: 1;
align-items: stretch;
width: 100%;
margin: 0;
padding: 0;
//transform: translateZ(0);
}
.glider-slide {
position: relative;
width: 100%;
min-width: 150px;
margin-left: 1px;
padding: func.rhythm(2) 0;
overflow: hidden;
img:not([class]) {
display: block;
border-radius: var.$border-radius;
width: 100%;
}
@include breakpoint.bp-only(sm) {
padding-right: func.rhythm(2);
padding-left: func.rhythm(2);
}
@include breakpoint.bp-up(lg) {
padding-right: func.rhythm(3);
padding-left: func.rhythm(3);
}
@include bem.m(stretch-items) {
display: flex;
align-items: stretch;
}
@include breakpoint.bp-up(lg) {
&:not(.active) {
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1px;
background-color: colors.$color-concrete;
}
}
}
}
.glider-nav {
position: absolute;
top: 50%;
left: 0;
z-index: func.z_index(middleground);
transform: translateY(-50%);
transition: background-color 0.25s ease-out;
user-select: none;
cursor: pointer;
&:focus {
background-color: colors.$color-snow;
}
svg {
transition: opacity 0.25s ease-out;
opacity: 1;
}
&.disabled {
background-color: colors.$color-ash;
box-shadow: 0 2px 5px color.adjust(colors.$color-granit, $lightness: 25%);
pointer-events: none;
svg {
opacity: 0.2;
fill: colors.$color-cyberspace;
}
}
@include breakpoint.bp-up(sm) {
left: func.rhythm(1);
}
}
.glider-next {
right: 0;
left: auto;
@include breakpoint.bp-up(sm) {
right: func.rhythm(1);
}
}
.glider-course-prev,
.glider-course-next {
&.disabled {
display: none;
+ .glider-course-finish {
display: inline-flex;
}
}
}
.glider-course-finish {
display: none;
}
.glider-hide {
opacity: 0;
}
.glider-dots {
display: flex;
flex-wrap: nowrap;
justify-content: center;
margin: 0 auto;
padding: 0;
user-select: none;
}
.glider-dot {
display: block;
width: func.to_rem(14px);
height: func.to_rem(14px);
margin: func.rhythm(0.5);
padding: 0;
border: 0;
border-radius: 50%;
outline: none;
background: colors.$color-concrete;
cursor: pointer;
user-select: none;
&:hover,
&:focus,
&.active {
background: colors.$color-cyberspace;
}
}
import Glider from 'glider-js';
const gliderElementCourse = document.querySelector('.js-glider-course');
if (gliderElementCourse) {
const GliderCourse = new Glider(gliderElementCourse, {
scrollLock: true,
slidesToShow: 1,
slidesToScroll: 1,
});
const nextBtns = document.querySelectorAll('.js-glider-next');
const prevBtns = document.querySelectorAll('.js-glider-prev');
const siteMain = document.querySelector('#siteMain');
const zoomImages = document.querySelectorAll('.js-zoom.zoom');
const youtubeVideos = document.querySelectorAll('[data-youtube]');
let slideIndex = GliderCourse.getCurrentSlide();
let bounding = 0;
const scrollTop = () => {
siteMain.scrollIntoView();
};
if (nextBtns) {
[].forEach.call(nextBtns, (nextBtn) => {
nextBtn.addEventListener('click', () => {
GliderCourse.scrollItem(slideIndex += 1, true);
[].forEach.call(youtubeVideos, (el) => el.youtube && el.youtube.pauseVideo());
if (siteMain) {
bounding = siteMain.getBoundingClientRect();
if (bounding.top < 0) {
scrollTop();
}
}
});
});
}
if (prevBtns) {
[].forEach.call(prevBtns, (prevBtn) => {
prevBtn.addEventListener('click', () => {
GliderCourse.scrollItem(slideIndex -= 1, true);
[].forEach.call(youtubeVideos, (el) => el.youtube && el.youtube.pauseVideo());
if (siteMain) {
bounding = siteMain.getBoundingClientRect();
if (bounding.top < 0) {
scrollTop();
}
}
});
});
}
if (zoomImages) {
[].forEach.call(zoomImages, (zoomImage) => {
zoomImage.addEventListener('click', () => {
zoomImage.classList.toggle('is-zoomed');
});
});
}
module.exports = GliderCourse;
}
import Glider from 'glider-js';
import nodeAdded from '../../assets/js/nodeAdded';
export function initHeroGlider(node) {
if (node.hasAttribute('data-glider-initialized')) {
return;
}
const dataLayer = window._mtm || [];
const gliderLinks = document.querySelectorAll('.glider-slide a');
const GliderHero = new Glider(node, {
scrollLock: true,
slidesToShow: 1,
slidesToScroll: 1,
rewind: true,
arrows: {
prev: '.js-glider-prev',
next: '.js-glider-next',
},
});
node.setAttribute('data-glider-initialized', 'true');
const autoplayDelay = node.dataset.timeout;
if (autoplayDelay) {
let autoplay = setInterval(() => {
GliderHero.scrollItem('next');
}, parseInt(autoplayDelay, 10));
node.addEventListener('mouseover', () => {
if (autoplay !== null) {
clearInterval(autoplay);
autoplay = null;
}
}, 0);
node.addEventListener('mouseout', () => {
if (autoplay === null) {
autoplay = setInterval(() => {
GliderHero.scrollItem('next');
}, parseInt(autoplayDelay, 10));
}
}, 0);
}
document.querySelector('.js-glider-prev').addEventListener('click', () => {
dataLayer.push({
event: 'carousel',
eventInfo: {
category: 'carousel',
action: 'click',
label: 'arrow_left',
},
});
});
document.querySelector('.js-glider-next').addEventListener('click', () => {
dataLayer.push({
event: 'carousel',
eventInfo: {
category: 'carousel',
action: 'click',
label: 'arrow_right',
},
});
});
[].forEach.call(gliderLinks, (gliderLink) => {
gliderLink.addEventListener('click', () => {
const linkTarget = gliderLink.href;
console.log(linkTarget);
dataLayer.push({
event: 'carousel',
eventInfo: {
category: 'carousel',
action: 'click',
label: linkTarget,
},
});
});
});
}
nodeAdded('.js-glider-hero', initHeroGlider);
const gliderElementHero = document.querySelector('.js-glider-hero');
if (gliderElementHero) {
initHeroGlider(gliderElementHero);
}
import Glider from 'glider-js';
const gliderWrappers = document.querySelectorAll('.glider-contain');
if (gliderWrappers) {
[].forEach.call(gliderWrappers, (gliderWrapper) => {
const gliderElement = gliderWrapper.querySelector('.js-glider');
const dots = gliderWrapper.classList.toString();
const glider = new Glider(gliderElement, {
scrollLock: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: `.${dots}+.glider-dots`,
arrows: {
prev: gliderWrapper.querySelector('.js-glider-prev'),
next: gliderWrapper.querySelector('.js-glider-next'),
},
responsive: [
{
breakpoint: 961,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
},
},
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
},
},
{
breakpoint: 469,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
});
module.exports = glider;
});
}
The Glider uses a vendor script named Glider. Read more about Glider:
The Glider component is dependant on JS-classes and is therefore not namespaced