<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-twitter">
<use xlink:href="#icon-twitter"></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";
// 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: rhythm(2);
padding-left: 0;
padding-right: 0;
}
.glider-slide {
@include m(course) {
margin-left: 0;
padding-left: 0;
padding-right: 0;
&::after {
display: none;
}
@include e(navigation) {
display: flex;
justify-content: space-between;
@include bp-up(lg) {
justify-content: flex-start;
}
}
@include e(media) {
&.zoom {
pointer-events: none;
@include bp-up(lg) {
pointer-events: auto;
cursor: zoom-in;
transition: all 0.15s ease-out;
position: relative;
&::after {
content: 'Förstora bilden';
color: $color-snow;
padding: rhythm(1) rhythm(2) rhythm(1) rhythm(4);
display: block;
position: absolute;
top: 0;
left: 0;
border-top-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
width: auto;
line-height: 1;
height: $icon-size-large * 1.4;
background-color: rgba($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: rhythm(1) center;
background-size: $icon-size-medium $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: z_index(foreground);
display: flex;
align-items: center;
justify-content: center;
background-color: rgba($color-cyberspace, 0.8);
flex-direction: column;
&::after {
display: none;
}
img {
cursor: zoom-out;
max-width: 100%;
max-height: 100vh;
padding: rhythm(1);
height: auto;
}
figcaption {
max-width: rem(612px);
text-align: center;
color: $color-snow;
padding-left: rhythm(2);
padding-right: rhythm(2);
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
}
}
figcaption {
margin-top: rhythm(1);
}
@include bp-up(lg) {
display: flex;
flex-direction: column-reverse;
margin-top: 0;
}
}
}
}
@charset "UTF-8";
// 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 e(text) {
position: absolute;
top: rhythm(2);
left: rhythm(2);
z-index: z_index(background);
padding-right: rhythm(2);
max-width: 95%;
@include bp-up(sm-xs) {
top: rhythm(3);
left: rhythm(3);
padding-right: rhythm(3);
max-width: 90%;
}
@include bp-up(sm) {
top: rhythm(4);
left: rhythm(4);
padding-right: rhythm(4);
max-width: 80%;
}
@include bp-up(md) {
top: rhythm(6);
left: rhythm(6);
padding-right: rhythm(6);
max-width: 70%;
}
@include bp-up(lg) {
top: rhythm(7);
left: rhythm(7);
padding-right: 0;
max-width: 60%;
}
@include bp-up(xl) {
top: rhythm(8);
left: rhythm(8);
}
> h1 {
color: $color-snow;
> span {
background-color: rgba(0,0,0,0.6);
}
@include plumber(
$font-size: 2,
$line-height: 3,
$leading-bottom: 1
);
@include bp-up(sm) {
@include plumber(
$font-size: 2.3,
$line-height: 3,
$leading-bottom: 1
);
}
@include bp-up(md) {
@include plumber(
$font-size: 3,
$line-height: 4,
$leading-bottom: 2
);
}
@include bp-up(lg) {
@include plumber(
$font-size: 4,
$line-height: 5,
$leading-bottom: 2
);
}
@include bp-up(xl) {
@include plumber(
$font-size: 5,
$line-height: 6,
$leading-bottom: 3
);
}
}
> p {
color: $color-snow;
> span {
background-color: rgba(0,0,0,0.6);
}
@include plumber(
$font-size: 1.5,
$line-height: 2,
);
@include bp-up(sm) {
@include plumber(
$font-size: 2,
$line-height: 3,
);
}
@include bp-up(lg) {
@include plumber(
$font-size: 2.5,
$line-height: 3,
);
}
@include bp-up(xl) {
@include plumber(
$font-size: 3,
$line-height: 4,
);
}
}
}
.glider {
visibility: hidden;
&[data-glider-initialized="true"] {
visibility: visible;
}
}
}
.glider-slide {
width: 100vw;
@include 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($color-black, 0) 35%, rgba($color-black, 1) 100%);
}
@include e(image) {
display: block;
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
@include bp-up(sm) {
min-height: rem(500px);
max-height: 75vh;
}
}
@include e(text) {
position: absolute;
z-index: 1;
bottom: rhythm(2);
left: rhythm(2);
padding-right: rhythm(2);
color: $color-snow;
font-family: $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: $color-cyberspace !important;
text-shadow: none;
}
&::before {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: $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(
$font-size: 2.3,
$line-height: 3,
$leading-bottom: 0,
$baseline: $headings-baseline
);
@include bp-up(sm-xs) {
bottom: rhythm(3);
left: rhythm(3);
padding-right: rhythm(3);
max-width: 90%;
@include plumber(
$font-size: 3,
$line-height: 4,
$leading-bottom: 0
);
}
@include bp-up(sm) {
bottom: rhythm(4);
left: rhythm(4);
padding-right: rhythm(4);
max-width: 80%;
@include plumber(
$font-size: 4,
$line-height: 5,
$leading-bottom: 0
);
}
@include bp-up(md) {
bottom: rhythm(6);
left: rhythm(6);
padding-right: rhythm(6);
max-width: 70%;
@include plumber(
$font-size: 5,
$line-height: 6,
$leading-bottom: 0
);
}
@include bp-up(lg) {
bottom: rhythm(7);
left: rhythm(7);
padding-right: 0;
max-width: 60%;
@include plumber(
$font-size: 6,
$line-height: 8,
$leading-bottom: 0
);
}
@include bp-up(xl) {
bottom: rhythm(8);
left: rhythm(8);
@include plumber(
$font-size: 7,
$line-height: 9,
$leading-bottom: 0
);
}
}
}
}
.glider-nav {
transform: scale(0.7) translateY(-100%);
@include bp-up(md) {
transform: scale(1) translateY(-50%);
}
@include m(hero) {
&.disabled {
display: none;
}
&.glider-prev {
left: 0;
@include bp-up(md) {
left: rhythm(1);
}
@include bp-up(lg) {
left: rhythm(2);
}
}
&.glider-next {
right: 0;
@include bp-up(md) {
right: rhythm(1);
}
@include bp-up(lg) {
right: rhythm(2);
}
}
}
}
@charset "UTF-8";
// The Glider components is dependant on JS-classes and is therefore not namespaced
.glider-contain {
display: flex;
position: relative;
align-items: center;
margin-top: rhythm(2);
margin-bottom: rhythm(2);
padding-right: rhythm(8);
padding-left: 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 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: rhythm(2) 0;
overflow: hidden;
img:not([class]) {
display: block;
border-radius: $border-radius;
width: 100%;
}
@include bp-only(sm) {
padding-right: rhythm(2);
padding-left: rhythm(2);
}
@include bp-up(lg) {
padding-right: rhythm(3);
padding-left: rhythm(3);
}
@include m(stretch-items) {
display: flex;
align-items: stretch;
}
@include bp-up(lg) {
&:not(.active) {
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1px;
background-color: $color-concrete;
}
}
}
}
.glider-nav {
position: absolute;
top: 50%;
left: 0;
z-index: z_index(middleground);
transform: translateY(-50%);
transition: background-color 0.25s ease-out;
user-select: none;
cursor: pointer;
&:focus {
background-color: $color-snow;
}
svg {
transition: opacity 0.25s ease-out;
opacity: 1;
}
&.disabled {
background-color: $color-ash;
box-shadow: 0 2px 5px lighten($color-granit, 25%);
pointer-events: none;
svg {
opacity: 0.2;
fill: $color-cyberspace;
}
}
@include bp-up(sm) {
left: rhythm(1);
}
}
.glider-next {
right: 0;
left: auto;
@include bp-up(sm) {
right: 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: rem(14px);
height: rem(14px);
margin: rhythm(0.5);
padding: 0;
border: 0;
border-radius: 50%;
outline: none;
background: $color-concrete;
cursor: pointer;
user-select: none;
&:hover,
&:focus,
&.active {
background: $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';
// eslint-disable-next-line import/prefer-default-export
export function initHeroGlider(node) {
if (node.hasAttribute('data-glider-initialized')) {
return;
}
// eslint-disable-next-line no-underscore-dangle
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