<figure class="o-hero ">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
<figcaption class="o-hero__caption">
<div class="wrapper">
<div class="o-hero__text">
<a href="#" class="o-hero__link">
<h1 class="supersize">Meningsfull tid i rapporten Svenskarna och internet 2019</h1>
</a>
<p class="o-hero__paragraph"></p>
<div class="o-hero__tags">
<a href="" class="a-tag a-tag--light">
<span class="a-tag__text">internet</span>
</a>
</div>
</div>
</div>
</figcaption>
</figure>
{{#if limited_width}}
<div class="wrapper">
<div class="row">
<div class="grid">
{{/if}}
<figure class="o-hero{{#if no_image_class}} {{no_image_class}}{{/if}}{{#if has_radius}} o-hero--border-radius{{/if}}{{#if has_video}} {{video_class}}{{/if}} {{#if is_event}}o-hero--event {{/if}}{{#if geometric_figures}} o-hero--geometric {{/if}}{{#if background_color}} {{background_color}} {{/if}}">
{{#if has_image}}<img src="{{hero_image}}" alt="hero" class="o-hero__image">{{/if}}
{{#if has_video}}
{{> @icon-overlay overlay_icon="play" youtube="3RVcnx-hOk8"}}
<div class="u-visuallyhidden">
<a href="#" class="a-button" data-youtube-play>
<span class="a-button__text">Play video</span>
</a>
<a href="#" class="a-button" data-youtube-stop>
<span class="a-button__text">Stop video</span>
</a>
</div>
{{else if is_event}}
<figcaption class="o-hero__content">
<div class="wrapper">
<p class="o-hero__text">{{event_text}} {{#if city}}<strong>{{city}}</strong>{{/if}}</p>
<h1 class="supersize">{{event_title}}</h1>
<p class="o-hero__text display-flex flex-wrap">
<span class="meta u-m-y-0 u-p-y-0 u-p-r-1">{{time}}</span>
<span class="o-hero__spacer">|</span>
<span>Arrangör: <a href="#">{{organizer}}
<svg class="icon o-mega-menu__link__icon">
<use xlink:href="#icon-external-link"></use>
</svg></a>
</span>
</p>
{{#if has_button}}
{{> @button el="a" modifiers="lemon a-button--inline u-m-y-2 u-m-r-2"}}
{{/if}}
{{> @share modifiers="inline"}}
</div>
</figcaption>
{{else}}
<figcaption class="o-hero__caption">
<div class="wrapper">
<div class="o-hero__text">
{{#if has_pre_heading}}<span class="u-m-b-1 u-display-block">{{pre_heading}}</span>{{/if}}
{{#if has_link}}<a href="#" class="o-hero__link">{{/if}}
<h1 class="supersize">{{heading}}</h1>
{{#if has_link}}</a>{{/if}}
{{#if has_text}}<p class="o-hero__paragraph">{{text}}</p>{{/if}}
{{#if has_tags}}
<div class="o-hero__tags">
{{> @tag is_light=true text="internet"}}
</div>
{{else if has_buttons}}
<div class="o-hero__buttons">
<div>{{> @button el="a" modifiers="lemon a-button--inline" text="Stockholm"}}</div>
<div>{{> @button el="a" modifiers="lemon a-button--inline" text="Linköping"}}</div>
<div>{{> @button el="a" modifiers="lemon a-button--inline" text="Malmö"}}</div>
</div>
{{/if}}
{{#if has_button}}
{{> @button el="a" text="Anmäl intresse" modifiers="lemon a-button--inline"}}
{{/if}}
</div>
</div>
</figcaption>
{{/if}}
</figure>
{{#if limited_width}}
</div>
</div>
</div>
{{/if}}
{
"heading": "Meningsfull tid i rapporten Svenskarna och internet 2019",
"has_image": true,
"has_radius": false,
"limited_width": false,
"has_buttons": false,
"has_tags": true,
"hero_image": "/assets/images/hero.jpg",
"has_link": true,
"has_pre_heading": false,
"has_text": true
}
@charset 'UTF-8';
@include organism(hero) {
@include m(bbk) {
background-color: $color-ocean-dark;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
overflow: visible;
@include e(top) {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
padding-top: rhythm(2);
padding-bottom: rhythm(2);
max-width: 100%;
@include bp-up(md) {
padding-top: rhythm(4);
padding-bottom: rhythm(4);
}
@include bp-up(lg) {
max-width: 900px;
}
@include bp-up(xl) {
padding-top: rhythm(8);
padding-bottom: rhythm(8);
}
@include bp-up(xxl) {
padding-top: rhythm(10);
padding-bottom: rhythm(10);
}
}
@include e(button) {
position: absolute;
bottom: 0;
transform: translateY(50%);
@extend %box-shadow;
}
@include e(text) {
color: $color-snow;
margin-left: rhythm(4);
transition: opacity 0.25s ease;
overflow: hidden;
opacity: 1;
&.is-minimized {
opacity: 0;
}
@include bp-up(md) {
max-width: 60%;
}
@include bp-up(lg) {
max-width: 60%;
}
}
}
@include e(gauge) {
width: rem(162px);
height: rem(162px);
flex-shrink: 0;
transform: scale(.7) translate3d(0,0,0);
position: relative;
@include bp-up(md) {
position: absolute;
left: 0;
top:37%;
transition: left 0.25s ease;
transform: scale(.7) translate3d(0,-50%,0);
&.is-testing {
left: 50%;
transition: scale 0.25s ease, transform 0.25s, left 0.25s ease;
transform: scale(.7) translate3d(-70%,-50%,0);
}
}
@include bp-up(xl) {
top: 50%;
transform: scale(1) translate3d(0,-50%,0);
&.is-testing {
left: 50%;
transition: scale 0.25s ease, transform 0.25s, left 0.25s ease;
transform: translate3d(-50%,-50%,0);
}
}
}
@include e(icon-gauge) {
fill: $color-snow;
width: 100%;
height: 100%;
}
@include e(icon-pointer) {
position: absolute;
top: 50%;
left: 50%;
width: rhythm(2);
height: rhythm(2);
margin-top: -#{rhythm(1)};
margin-left: -#{rhythm(1)};
transform: rotate(0deg);
transition: transform .8s;
&.is-testing {
transform: rotate(188deg);
}
&::before {
content: '';
display: block;
width: 46px;
height: 43px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjcuNyAxOC4zQzIzLjQgMjIuMiAwIDI5LjUgMCAyOS41UzkuNCA2LjggMTMuNiAzYzQuMi0zLjkgMTAuOC0zLjYgMTQuNy43IDMuOSA0LjIgMy42IDEwLjctLjYgMTQuNiIgZmlsbD0iIzMyODRCRiIvPjxwYXRoIGQ9Ik0yNS40IDExLjRjLS4xIDIuOC0yLjUgNC45LTUuMyA0LjgtMi44LS4xLTQuOS0yLjUtNC44LTUuMy4xLTIuOCAyLjUtNC45IDUuMy00LjggMi43LjIgNC45IDIuNSA0LjggNS4zIiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTI1LjQgMTEuNGMtLjEgMi44LTIuNSA0LjktNS4zIDQuOC0yLjgtLjEtNC45LTIuNS00LjgtNS4zLjEtMi44IDIuNS00LjkgNS4zLTQuOCAyLjcuMiA0LjkgMi41IDQuOCA1LjMiIGZpbGw9IiNGRkYiLz48L2c+PC9zdmc+Cg==');
background-repeat: no-repeat;
background-size: 46px 43px;
position: absolute;
top: -#{rem(7px)};
left: -#{rem(20px)};
}
}
}
@charset "UTF-8";
@include organism(hero) {
@include m(dynamic-headline) {
display: flex;
flex-direction: column;
justify-content: space-around;
overflow: visible;
border-radius: 0;
@include e(image) {
max-height: none;
min-height: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
@include bp-up(xxl) {
object-position: 50% 50%;
}
}
@include e(caption) {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: rhythm(3);
background-image: none;
position: static;
z-index: auto;
color: $color-snow;
> h1 {
--minFontSize: 22px;
--maxFontSize: 200px;
--scaler: 10vw;
font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
font-family: $font-family-bold;
margin: 0;
padding: 0;
line-height: 1.2;
@include bp-up(md) {
line-height: 1.1;
}
@include bp-up(lg) {
line-height: 1;
}
}
@include bp-up(sm-xs) {
padding: rhythm(4);
}
@include bp-up(sm) {
padding: rhythm(5);
}
@include bp-up(md) {
padding: rhythm(7);
}
@include bp-up(lg) {
padding: rhythm(8);
}
@include bp-up(xl) {
padding: rhythm(10);
}
&::before {
display: block;
content: attr(data-meta);
font-family: $font-family-mono;
font-size: 14px !important;
text-transform: uppercase;
text-shadow: 0 0 rem(5px) $color-black;
@include bp-up(sm-xs) {
margin-left: rhythm(0.5);
}
@include bp-up(md) {
font-size: 18px !important;
margin-left: rhythm(1);
}
@include bp-up(lg) {
font-size: 20px !important;
}
@include bp-up(xl) {
font-size: 22px !important;
}
@include bp-up(xxl) {
font-size: 24px !important;
}
}
}
@include e(button-continue) {
position: relative;
z-index: z_index(middleground);
align-self: center;
transform: scale(1) translateY(0);
animation: pulse infinite 1.5s ease;
will-change: transform;
top: rem(15px);
@include bp-up(sm) {
animation: pulse2 infinite 1.5s ease;
top: rem(20px);
}
@include bp-up(md) {
top: rem(40px);
}
@include bp-up(xl) {
animation: pulse3 infinite 1.5s ease;
top: rem(50px);
}
}
@keyframes pulse {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-25%);
}
100% {
transform: translateY(0);
}
}
@keyframes pulse2 {
0% {
transform: translateY(0) scale(2);
}
50% {
transform: translateY(-25%) scale(2);
}
100% {
transform: translateY(0) scale(2);
}
}
@keyframes pulse3 {
0% {
transform: translateY(0) scale(3);
}
50% {
transform: translateY(-25%) scale(3);
}
100% {
transform: translateY(0) scale(3);
}
}
}
}
@charset 'UTF-8';
@include organism(hero) {
position: relative;
z-index: z_index(background);
margin-bottom: rhythm(4);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.supersize {
+ [class*='buttons'] {
margin-top: rhythm(2);
@include bp-up(lg) {
margin-top: rhythm(3);
}
}
}
@include bp-up(sm) {
overflow: hidden;
background-color: transparent;
}
@include e(image) {
display: block;
object-fit: cover;
object-position: 50% 25%;
width: 100%;
@include bp-up(sm) {
min-height: rem(500px);
max-height: 50vh;
}
}
@include e(caption) {
display: flex;
align-items: flex-end;
padding: rhythm(2) 0;
background-image: none;
@include bp-up(sm) {
position: absolute;
z-index: z_index(middlegroundImportant);
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: rhythm(4);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-black, 0) 35%, rgba($color-black, 1) 100%);
text-shadow: $text-shadow;
}
@include bp-up(md) {
padding: rhythm(6);
}
@include bp-up(lg) {
padding: rhythm(8);
}
}
@include e(paragraph) {
color: $color-cyberspace;
@include plumber(
$font-size: 2.5,
$line-height: 3
);
@include bp-up(sm) {
color: $color-snow;
}
}
@include e(tags) {
margin-top: rhythm(2);
@include bp-up(lg) {
margin-top: rhythm(3);
}
@include bp-down(sm-xs) {
[class*="tag--light"] {
[class*="tag__text"] {
color: $color-cyberspace;
}
}
}
}
@include e(buttons) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: -#{rhythm(1)} 0 0 -#{rhythm(3)};
@include atom(button) {
margin: rhythm(1) 0 0 rhythm(3);
}
@include bp-up(sm) {
flex-direction: row;
}
}
@include e(text) {
:last-child {
margin-bottom: 0;
}
@include bp-up(sm) {
color: $color-snow;
}
@include bp-up(md) {
max-width: 100%;
}
@include bp-up(lg) {
max-width: 70%;
}
@include bp-up(xxl) {
max-width: 60%;
}
}
@include b(a-tag) {
@include tag;
@include bp-up(sm) {
@include tag-light;
}
}
@include e(link) {
color: $color-cyberspace;
text-decoration: none;
&:hover,
&:focus {
text-decoration: underline;
}
&::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0,;
bottom: 0;
left: 0;
cursor: pointer;
}
> p {
@include plumber(
$font-size: 2.5,
$line-height: 3
);
}
+ [class*='buttons'] {
margin-top: rhythm(2);
@include bp-up(lg) {
margin-top: rhythm(3);
}
}
@include bp-up(sm) {
color: $color-snow;
}
}
// Hero without image
@include m(no-image) {
background-color: transparent;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
@include e(caption) {
position: static;
background-image: none;
text-shadow: none;
.wrapper {
padding-right: 0;
padding-left: 0;
@include bp-up(sm) {
padding-right: $grid-gutter-width;
padding-left: $grid-gutter-width;
}
}
@include bp-down(md) {
padding-right: 0;
padding-left: 0;
}
}
@include e(paragraph) {
color: $color-cyberspace;
}
&.alignfull {
@include e(caption) {
.wrapper {
padding-right: rhythm(2);
padding-left: rhythm(2);
}
}
}
@include e(link) {
color: $color-cyberspace;
}
@include e(text) {
color: $color-cyberspace;
}
@include e(paragraph) {
@extend %preamble;
}
@include b(a-tag) {
@include tag;
[class*=text] {
color: $color-cyberspace;
}
}
@include bp-up(md) {
@include e(text) {
max-width: 85%;
}
}
@include bp-up(lg) {
@include e(text) {
max-width: 67%;
}
}
}
@include m(timeline) {
@include e(caption) {
background-color: $color-snow;
@include bp-up(sm) {
background-color: transparent;
}
}
}
// Hero with earlier mobile breakpoint
@include m(break-early) {
@include e(caption) {
@include bp-up(sm) {
position: static;
padding: rhythm(2) 0;
}
@include bp-up(md) {
padding: rhythm(3) rhythm(1);
}
@include bp-up(lg) {
position: absolute;
z-index: z_index(middlegroundImportant);
top: 50%;
right: 0;
bottom: auto;
left: 0;
padding: rhythm(4);
transform: translateY(-50%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-black, 0) 55%, rgba($color-black, 1) 100%);
text-shadow: 0 0 rhythm(2) rgba($color-black, 0.5);
}
@include bp-down(md) {
[class*="tag--light"] {
[class*="tag__text"] {
color: $color-cyberspace;
}
}
}
}
@include e(text) {
max-width: 100%;
@include bp-up(md) {
max-width: 90%;
}
@include bp-up(lg) {
max-width: 85%;
}
@include bp-up(xxl) {
max-width: 70%;
}
@include bp-only(lg) {
.supersize {
@include plumber(
$font-size: 6,
$line-height: 7,
$leading-bottom: 2
);
}
}
}
@include e(link) {
color: $color-cyberspace;
text-shadow: none;
@include bp-up(lg) {
color: $color-snow;
text-shadow: 0 0 rhythm(2) rgba($color-black, 0.5);
}
}
@include b(a-tag) {
@include tag;
@include bp-up(lg) {
@include tag-light;
}
}
}
@include m(no-break) {
@include e(image) {
aspect-ratio: 1 / 1;
object-position: 100% 25%;
@include bp-up(sm-xs) {
aspect-ratio: 4 / 3;
}
@include bp-up(sm) {
aspect-ratio: 16 / 9;
}
@include bp-up(md) {
object-position: 50% 25%;
}
}
@include e(caption) {
position: absolute;
z-index: z_index(middlegroundImportant);
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: rhythm(1) rhythm(1) rhythm(4) rhythm(1);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-black, 0) 35%, rgba($color-black, 1) 100%);
text-shadow: $text-shadow;
@include bp-up(sm) {
padding: rhythm(2) rhythm(2) rhythm(4) rhythm(2);
}
@include bp-up(md) {
padding: rhythm(4);
}
}
@include e(paragraph) {
color: $color-snow;
@include bp-down(sm-xs) {
font-size: 95%;
}
}
@include e(text) {
color: $color-snow;
}
@include e(link) {
color: $color-snow;
}
@include bp-down(sm-xs) {
@include e(buttons) {
position: absolute;
bottom: 0;
left: rhythm(3);
right: rhythm(3);
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
margin: 0 0 rhythm(2) 0;
> div {
flex: 1;
display: flex;
align-items: stretch;
margin: 0 rhythm(1) 0 0;
&:last-child {
margin-right: 0;
}
}
a[class*='a-button'],
button[class*='a-button']{
flex: 1;
margin: 0;
padding-top: rhythm(1);
padding-bottom: rhythm(1);
padding-left: rhythm(1.5);
padding-right: rhythm(1.5);
white-space: nowrap;
> span {
font-size: 90%;
}
}
}
}
}
// Hero without darkened caption
@include m(clean) {
@include e(caption) {
background: none;
}
}
// Hero with border-radius
@include m(border-radius) {
border-radius: $border-radius;
@include e(image) {
border-radius: $border-radius;
}
@include bp-up(md) {
@include e(text) {
max-width: 100%;
.supersize {
@include plumber(
$font-size: 4.5,
$line-height: 5,
$leading-bottom: 1
);
}
}
}
@include bp-up(lg) {
@include e(text) {
max-width: 90%;
}
}
@include bp-up(xxl) {
@include e(text) {
max-width: 80%;
.supersize {
@include plumber(
$font-size: 7,
$line-height: 8,
$leading-bottom: 2
);
}
}
}
@include bp-only(xs) {
.wrapper {
padding-left: 0;
padding-right: 0;
}
}
}
// Hero with video
@include m(video) {
margin-top: rem(20px);
//padding-top: 56.25%;
iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@include bp-up(lg) {
margin-top: rhythm(4);
}
}
@include m(video-wide) {
width: 100%;
@include e(video) {
width: 100%;
object-fit: cover;
object-position: 50% center;
@include bp-up(sm) {
min-height: rem(500px);
max-height: 50vh;
}
}
}
// Event
@include m(event) {
width: 100%;
[class*='share'] {
a {
> svg {
&[class*='facebook'],
&[class*='linkedin'] {
border-radius: $border-radius;
background-color: $color-snow;
}
}
}
}
@include e(content) {
padding: rhythm(2) 0;
@include bp-up(sm) {
padding: rhythm(4);
}
@include e(icon) {
position: relative;
width: $icon-size-medium;
height: $icon-size-medium;
margin-left: rhythm(0.5);
transform: translateY(rem(1px));
fill: currentColor;
@include m(external) {
width: $icon-size-smallest;
height: $icon-size-smallest;
}
}
}
@include e(text) {
margin-bottom: 0;
color: $color-cyberspace;
}
@include e(spacer) {
display: inline-flex;
margin-right: rhythm(1);
}
}
// Geometric
@include m(geometric) {
position: relative;
overflow: hidden;
&::after {
content: '';
position: absolute;
z-index: z_index(background);
top: 25%;
left: -25%;
width: rem(250px);
height: rem(250px);
transform: translate(calc(-150% - #{rem(20px)}), -50%) rotate(-20deg);
transform-origin: center left;
animation: spin 240s linear infinite;
animation-direction: alternate;
background-color: $color-lemon;
@include bp-up(sm) {
left: -15%;
}
@include bp-up(xl) {
left: 0;
animation-duration: 120s;
}
}
&::before {
content: '';
position: absolute;
top: 75%;
right: -25%;
width: rem(250px);
height: rem(80px);
transform: translate(calc(120% + #{rem(20px)}), 50%) rotate(20deg);
transform-origin: center center;
animation: spin 240s linear infinite;
animation-direction: alternate-reverse;
background-color: $color-lemon;
@include bp-up(sm) {
right: -15%;
}
@include bp-up(xl) {
right: 0;
animation-duration: 120s;
}
}
@include bp-up(xl) {
h1 {
max-width: 60%;
}
}
@include e(content) {
position: relative;
z-index: z_index(middleground);
}
@keyframes spin {
from {
transform: rotate(20deg);
}
to {
transform: rotate(379deg);
}
}
}
}
No notes defined.