<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}}
		<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/3RVcnx-hOk8?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	{{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}}
				<p class="o-hero__paragraph">{{text}}</p>
				{{#if has_tags}}
					<div class="o-hero__tags">
						{{> @tag is_light=true text="internet"}}
					</div>
				{{else if has_buttons}}
					<div class="o-hero__buttons">
						{{render '@button'}}
						{{render '@button'}}
					</div>
				{{/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
}
  • Content:
    @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;
    
    				@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;
    
    			@include bp-up(sm) {
    				animation: pulse2 infinite 1.5s ease;
    			}
    
    			@include bp-up(xl) {
    				animation: pulse3 infinite 1.5s ease;
    			}
    		}
    
    		@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);
    			}
    		}
    
    
    	}
    }
    
  • URL: /components/raw/hero/_hero--dynamic-headline.scss
  • Filesystem Path: src/organisms/hero/_hero--dynamic-headline.scss
  • Size: 2.7 KB
  • Content:
    @charset 'UTF-8';
    
    @include organism(hero) {
    	position: relative;
    	z-index: z_index(background);
    	-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) {
    		@include plumber(
    			$font-size: 2.5,
    			$line-height: 3
    		);
    	}
    
    	@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: column;
    		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;
    			}
    		}
    
    		&.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(lg) {
    				max-width: 70%;
    			}
    
    			@include bp-only(lg) {
    				.supersize {
    					@include plumber(
    						$font-size: 6,
    						$line-height: 7,
    						$leading-bottom: 2
    					);
    				}
    			}
    
    			@include bp-up(xl) {
    				max-width: 50%;
    			}
    		}
    
    		@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;
    			}
    		}
    	}
    
    	// 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);
    			}
    		}
    	}
    }
    
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: src/organisms/hero/_hero.scss
  • Size: 8.5 KB

No notes defined.