Internetstiftelsen Styleguide

Hero: Default 

<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
}
  • Content: 
    @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)};
		}
	}
}
  • URL: /components/raw/hero/_hero--bbk.scss
  • Filesystem Path: src/organisms/hero/_hero--bbk.scss
  • Size: 3.2 KB
  • 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;
				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);
			}
		}


	}
}
  • URL: /components/raw/hero/_hero--dynamic-headline.scss
  • Filesystem Path: src/organisms/hero/_hero--dynamic-headline.scss
  • Size: 2.9 KB
  • Content: 
    @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);
			}
		}
	}
}
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: src/organisms/hero/_hero.scss
  • Size: 10.5 KB

No notes defined.