Styleguide

Branding 

<section class="m-branding" role="banner" style="display: none">
    <div class="m-branding__wrapper">
        <div class="m-branding__row">
            <h1 class="m-branding__title">
                <span class="m-branding__unbreakeable">Ökologisch konsequent.</span>
                <span class="m-branding__unbreakeable">Sozial engagiert.</span>
                <span class="m-branding__unbreakeable">Global solidarisch.</span>
            </h1>
            <a href="/" class="m-branding__logo"><img class="a-logo" alt="" src="/img/logo-defr--white.svg"></a>
        </div>
    </div>
</section>

<script>
    var branding = parseInt(window.sessionStorage.getItem('branding') || 0);
    if (branding < 2) {
        document.querySelectorAll('.m-branding').forEach(el => el.style.display = 'block');
        window.sessionStorage.setItem('branding', (branding + 1).toString());
    }
</script>
 
<section class="m-branding" role="banner" style="display: none">
	<div class="m-branding__wrapper">
		<div class="m-branding__row">
			<h1 class="m-branding__title">
				{{#each unbreakables}}
					<span class="m-branding__unbreakeable">{{ . }}</span>
				{{/each}}
			</h1>
			<a href="/" class="m-branding__logo">{{> @a-logo logo }}</a>
		</div>
	</div>
</section>

<script>
	var branding = parseInt( window.sessionStorage.getItem( 'branding' ) || 0 );
	if (branding < 2) {
		document.querySelectorAll( '.m-branding' ).forEach( el => el.style.display = 'block' );
		window.sessionStorage.setItem( 'branding', ( branding + 1 ).toString() );
	}
</script>
  • Content: 
    .no-branding .m-branding {
	display: none;
}

.m-branding {
	$height: 136px;

	background-color: $color-primary;
	width: 100%;
	height: $height;

	@include high-contrast {
		background-color: $color-primary-dark;
	}

	@media print {
		display: none;
	}

	&__wrapper {
		@extend .grid-width;
		display: table;
	}

	&__row {
		display: table-row;
		height: $height;
	}

	&__logo {
		@include clean-link;
		display: table-cell;
		vertical-align: middle;
		height: $height;
		width: 148px;
		padding: 22px 0;

		@media all and (max-width: $size-small) {
			display: none;
		}

		img {
			width: 148px;
		}
	}

	&__title {
		color: $color-white;
		display: table-cell;
		vertical-align: middle;
		width: 100%;
		height: $height;
		@include fluid-props(font-size, $fluid-min, $fluid-max, 24px, 34px);
	}
}
  • URL: /components/raw/m-branding/_m-branding.scss
  • Filesystem Path: styleguide/src/components/molecules/m-branding/_m-branding.scss
  • Size: 800 Bytes 
{
  "unbreakables": [
    "Ökologisch konsequent.",
    "Sozial engagiert.",
    "Global solidarisch."
  ],
  "logo": {
    "de": true,
    "white": true,
    "modifiers": [
      "white"
    ]
  }
}

No notes defined.