Hero: Dynamic Headline

WIP

HTML
View
Context
Assets
Info
Notes


        
        <figure class="o-hero o-hero--dynamic-headline">
    <img src="/assets/images/Reprogramming_ENIAC2.png" alt="hero" class="o-hero__image">
    <figcaption class="o-hero__caption" data-meta="Utställning">
        <h1>Datadamer - Kvinnorna som digitaliserade världen</h1>
        <a href="#exhibition" class="a-button a-button--a-button--icon a-button--standalone-icon a-button--standalone-icon--white o-hero__button-continue">
            <span class="a-button__text">Fortsätt</span>
            <svg class="icon a-button__icon">
                <use xlink:href="#icon-arrow-down"></use>
            </svg>
        </a>
    </figcaption>
</figure>


        <figure class="o-hero o-hero--dynamic-headline">
	{{#if has_image}}<img src="{{hero_image}}" alt="hero" class="o-hero__image">{{/if}}
	<figcaption class="o-hero__caption" data-meta="Utställning">
		<h1>{{heading}}</h1>
		{{> @button el="a" url="#exhibition" text="Fortsätt" modifiers="a-button--icon a-button--standalone-icon a-button--standalone-icon--white" additional_classes="o-hero__button-continue" icon="arrow-down"}}
	</figcaption>
</figure>


        
            
            {
  "heading": "Datadamer - Kvinnorna som digitaliserade världen",
  "has_image": true,
  "has_radius": false,
  "limited_width": false,
  "has_buttons": false,
  "has_tags": true,
  "hero_image": "/assets/images/Reprogramming_ENIAC2.png",
  "has_link": true,
  "has_pre_heading": false,
  "has_text": true
}

File:

Content:


                                @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/typography/typography';
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;
@use '../../vendor/baseline/plumber' as plumber;

@include mixin.organism(hero) {
	position: relative;
	z-index: func.z_index(background);
	margin-bottom: func.rhythm(4);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	.supersize {
		+ [class*='buttons'] {
			margin-top: func.rhythm(2);

			@include breakpoint.bp-up(lg) {
				margin-top: func.rhythm(3);
			}
		}
	}

	@include breakpoint.bp-up(sm) {
		overflow: hidden;
		background-color: transparent;
	}

	@include bem.e(image) {
		display: block;
		object-fit: cover;
		object-position: 50% 25%;
		width: 100%;

		@include breakpoint.bp-up(sm) {
			min-height: func.to_rem(500px);
			max-height: 50vh;
		}
	}

	@include bem.e(caption) {
		display: flex;
		align-items: flex-end;
		padding: func.rhythm(2) 0;
		background-image: none;

		@include breakpoint.bp-up(sm) {
			position: absolute;
			z-index: func.z_index(middlegroundImportant);
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: func.rhythm(4);
			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(colors.$color-black, 0) 35%, rgba(colors.$color-black, 1) 100%);
			text-shadow: config.$text-shadow;
		}

		@include breakpoint.bp-up(md) {
			padding: func.rhythm(6);
		}

		@include breakpoint.bp-up(lg) {
			padding: func.rhythm(8);
		}
	}

	@include bem.e(paragraph) {
		color: colors.$color-cyberspace;

		@include plumber.plumber(
			var.$font-size: 2.5,
			$line-height: 3
		);

		@include breakpoint.bp-up(sm) {
			color: colors.$color-snow;
		}
	}

	@include bem.e(tags) {
		margin-top: func.rhythm(2);

		@include breakpoint.bp-up(lg) {
			margin-top: func.rhythm(3);
		}

		@include breakpoint.bp-down(sm-xs) {
			[class*="tag--light"] {
				[class*="tag__text"] {
					color: colors.$color-cyberspace;
				}
			}
		}
	}

	@include bem.e(buttons) {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: -#{func.rhythm(1)} 0 0 -#{func.rhythm(3)};

		@include mixin.atom(button) {
			margin: func.rhythm(1) 0 0 func.rhythm(3);
		}

		@include breakpoint.bp-up(sm) {
			flex-direction: row;
		}
	}

	@include bem.e(text) {
		:last-child {
			margin-bottom: 0;
		}

		@include breakpoint.bp-up(sm) {
			color: colors.$color-snow;
		}

		@include breakpoint.bp-up(md) {
			max-width: 100%;
		}

		@include breakpoint.bp-up(lg) {
			max-width: 70%;
		}

		@include breakpoint.bp-up(xxl) {
			max-width: 60%;
		}
	}

	@include bem.b(a-tag) {
		@include mixin.tag;

		@include breakpoint.bp-up(sm) {
			@include mixin.tag-light;
		}
	}

	@include bem.e(link) {
		color: colors.$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.plumber(
				var.$font-size: 2.5,
				$line-height: 3
			);
		}

		+ [class*='buttons'] {
			margin-top: func.rhythm(2);

			@include breakpoint.bp-up(lg) {
				margin-top: func.rhythm(3);
			}
		}

		@include breakpoint.bp-up(sm) {
			color: colors.$color-snow;
		}
	}

	// Hero without image
	@include bem.m(no-image) {
		background-color: transparent;
		-webkit-font-smoothing: auto;
		-moz-osx-font-smoothing: auto;

		@include bem.e(caption) {
			position: static;
			background-image: none;
			text-shadow: none;

			.wrapper {
				padding-right: 0;
				padding-left: 0;

				@include breakpoint.bp-up(sm) {
					padding-right: var.$grid-gutter-width;
					padding-left: var.$grid-gutter-width;
				}
			}

			@include breakpoint.bp-down(md) {
				padding-right: 0;
				padding-left: 0;
			}
		}

		@include bem.e(paragraph) {
			color: colors.$color-cyberspace;
		}

		&.alignfull {
			@include bem.e(caption) {
				.wrapper {
					padding-right: func.rhythm(2);
					padding-left: func.rhythm(2);
				}
			}
		}

		@include bem.e(link) {
			color: colors.$color-cyberspace;
		}

		@include bem.e(text) {
			color: colors.$color-cyberspace;
		}

		@include bem.e(paragraph) {
			@extend %preamble;
		}

		@include bem.b(a-tag) {
			@include mixin.tag;

			[class*=text] {
				color: colors.$color-cyberspace;
			}
		}

		@include breakpoint.bp-up(md) {
			@include bem.e(text) {
				max-width: 85%;
			}
		}

		@include breakpoint.bp-up(lg) {
			@include bem.e(text) {
				max-width: 67%;
			}
		}
	}

	@include bem.m(timeline) {
		@include bem.e(caption) {
			background-color: colors.$color-snow;

			@include breakpoint.bp-up(sm) {
				background-color: transparent;
			}
		}
	}

	// Hero with earlier mobile breakpoint
	@include bem.m(break-early) {
		@include bem.e(caption) {
			@include breakpoint.bp-up(sm) {
				position: static;
				padding: func.rhythm(2) 0;
			}

			@include breakpoint.bp-up(md) {
				padding: func.rhythm(3) func.rhythm(1);
			}

			@include breakpoint.bp-up(lg) {
				position: absolute;
				z-index: func.z_index(middlegroundImportant);
				top: 50%;
				right: 0;
				bottom: auto;
				left: 0;
				padding: func.rhythm(4);
				transform: translateY(-50%);
				background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(colors.$color-black, 0) 55%, rgba(colors.$color-black, 1) 100%);
				text-shadow: 0 0 func.rhythm(2) rgba(colors.$color-black, 0.5);
			}

			@include breakpoint.bp-down(md) {
				[class*="tag--light"] {
					[class*="tag__text"] {
						color: colors.$color-cyberspace;
					}
				}
			}
		}

		@include bem.e(text) {
			max-width: 100%;

			@include breakpoint.bp-up(md) {
				max-width: 90%;
			}

			@include breakpoint.bp-up(lg) {
				max-width: 85%;
			}

			@include breakpoint.bp-up(xxl) {
				max-width: 70%;
			}

			@include breakpoint.bp-only(lg) {
				.supersize {
					@include plumber.plumber(
						var.$font-size: 6,
						$line-height: 7,
						$leading-bottom: 2
					);
				}
			}
		}

		@include bem.e(link) {
			color: colors.$color-cyberspace;
			text-shadow: none;

			@include breakpoint.bp-up(lg) {
				color: colors.$color-snow;
				text-shadow: 0 0 func.rhythm(2) rgba(colors.$color-black, 0.5);
			}
		}

		@include bem.b(a-tag) {
			@include mixin.tag;

			@include breakpoint.bp-up(lg) {
				@include mixin.tag-light;
			}
		}
	}

	@include bem.m(no-break) {
		@include bem.e(image) {
			aspect-ratio: 1 / 1;
			object-position: 100% 25%;

			@include breakpoint.bp-up(sm-xs) {
				aspect-ratio: 4 / 3;
			}

			@include breakpoint.bp-up(sm) {
				aspect-ratio: 16 / 9;
			}

			@include breakpoint.bp-up(md) {
				object-position: 50% 25%;
			}
		}

		@include bem.e(caption) {
			position: absolute;
			z-index: func.z_index(middlegroundImportant);
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: func.rhythm(1) func.rhythm(1) func.rhythm(4) func.rhythm(1);
			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(colors.$color-black, 0) 35%, rgba(colors.$color-black, 1) 100%);
			text-shadow: config.$text-shadow;

			@include breakpoint.bp-up(sm) {
				padding: func.rhythm(2) func.rhythm(2) func.rhythm(4) func.rhythm(2);
			}

			@include breakpoint.bp-up(md) {
				padding: func.rhythm(4);
			}
		}

		@include bem.e(paragraph) {
			color: colors.$color-snow;

			@include breakpoint.bp-down(sm-xs) {
				font-size: 95%;
			}
		}

		@include bem.e(text) {
			color: colors.$color-snow;
		}

		@include bem.e(link) {
			color: colors.$color-snow;
		}

		@include breakpoint.bp-down(sm-xs) {
			@include bem.e(buttons) {
				position: absolute;
				bottom: 0;
				left: func.rhythm(3);
				right: func.rhythm(3);
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: stretch;
				margin: 0 0 func.rhythm(2) 0;

				> div {
					flex: 1;
					display: flex;
					align-items: stretch;
					margin: 0 func.rhythm(1) 0 0;

					&:last-child {
						margin-right: 0;
					}
				}

				a[class*='a-button'],
				button[class*='a-button']{
					flex: 1;
					margin: 0;
					padding-top: func.rhythm(1);
					padding-bottom: func.rhythm(1);
					padding-left: func.rhythm(1.5);
					padding-right: func.rhythm(1.5);
					white-space: nowrap;

					> span {
						font-size: 90%;
					}
				}
			}
		}
	}

	// Hero without darkened caption
	@include bem.m(clean) {
		@include bem.e(caption) {
			background: none;
		}
	}

	// Hero with border-radius
	@include bem.m(border-radius) {
		border-radius: var.$border-radius;

		@include bem.e(image) {
			border-radius: var.$border-radius;
		}

		@include breakpoint.bp-up(md) {
			@include bem.e(text) {
				max-width: 100%;

				.supersize {
					@include plumber.plumber(
						var.$font-size: 4.5,
						$line-height: 5,
						$leading-bottom: 1
					);
				}
			}
		}

		@include breakpoint.bp-up(lg) {
			@include bem.e(text) {
				max-width: 90%;
			}
		}

		@include breakpoint.bp-up(xxl) {
			@include bem.e(text) {
				max-width: 80%;

				.supersize {
					@include plumber.plumber(
						var.$font-size: 7,
						$line-height: 8,
						$leading-bottom: 2
					);
				}
			}
		}

		@include breakpoint.bp-only(xs) {
			.wrapper {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}

	// Hero with video
	@include bem.m(video) {
		margin-top: func.to_rem(20px);
		//padding-top: 56.25%;

		iframe {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		@include breakpoint.bp-up(lg) {
			margin-top: func.rhythm(4);
		}
	}

	@include bem.m(video-wide) {
		width: 100%;

		@include bem.e(video) {
			width: 100%;
			object-fit: cover;
			object-position: 50% center;

			@include breakpoint.bp-up(sm) {
				min-height: func.to_rem(500px);
				max-height: 50vh;
			}

		}
	}

	// Event
	@include bem.m(event) {
		width: 100%;

		[class*='share'] {
			a {
				> svg {
					&[class*='facebook'],
					&[class*='linkedin'] {
						border-radius: var.$border-radius;
						background-color: colors.$color-snow;
					}

					&[class*='facebook'] {
						border-radius: 50%;
					}
				}
			}
		}

		@include bem.e(content) {
			padding: func.rhythm(2) 0;

			@include breakpoint.bp-up(sm) {
				padding: func.rhythm(4);
			}

			@include bem.e(icon) {
				position: relative;
				width: var.$icon-size-medium;
				height: var.$icon-size-medium;
				margin-left: func.rhythm(0.5);
				transform: translateY(func.to_rem(1px));
				fill: currentColor;

				@include bem.m(external) {
					width: var.$icon-size-smallest;
					height: var.$icon-size-smallest;
				}
			}
		}

		@include bem.e(text) {
			margin-bottom: 0;
			color: colors.$color-cyberspace;
		}

		@include bem.e(spacer) {
			display: inline-flex;
			margin-right: func.rhythm(1);
		}
	}

	// Geometric
	@include bem.m(geometric) {
		position: relative;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			z-index: func.z_index(background);
			top: 25%;
			left: -25%;
			width: func.to_rem(250px);
			height: func.to_rem(250px);
			transform: translate(calc(-150% - #{func.to_rem(20px)}), -50%) rotate(-20deg);
			transform-origin: center left;
			animation: spin 240s linear infinite;
			animation-direction: alternate;
			background-color: colors.$color-lemon;

			@include breakpoint.bp-up(sm) {
				left: -15%;
			}

			@include breakpoint.bp-up(xl) {
				left: 0;
				animation-duration: 120s;
			}
		}

		&::before {
			content: '';
			position: absolute;
			top: 75%;
			right: -25%;
			width: func.to_rem(250px);
			height: func.to_rem(80px);
			transform: translate(calc(120% + #{func.to_rem(20px)}), 50%) rotate(20deg);
			transform-origin: center center;
			animation: spin 240s linear infinite;
			animation-direction: alternate-reverse;
			background-color: colors.$color-lemon;

			@include breakpoint.bp-up(sm) {
				right: -15%;
			}

			@include breakpoint.bp-up(xl) {
				right: 0;
				animation-duration: 120s;
			}
		}

		@include breakpoint.bp-up(xl) {
			h1 {
				max-width: 60%;
			}
		}

		@include bem.e(content) {
			position: relative;
			z-index: func.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: 12.5 KB

Handle: @hero--dynamic-headline
Variants (12): Default , Wrapped , Buttons , No Image , Video , Pre Heading , Event Hero , Event Hero With Button , Clean , Early Breakpoint , No Breakpoint , Dynamic Headline
Preview:
- With layout
- Component only
Filesystem Path: src/organisms/hero/hero--dynamic-headline.hbs
References (1): @button

No notes defined.