Header

The Header is available in two different versions (Black, White), they should be used according to the background of the page. Only use the black version if the background is #000, otherwise use the white version.

<header class="header">

	<a 
		href="#" 
		class="icon header__back">

		<svg></svg>
	</a>
	
	<div class="header__logo">
		<svg></svg>
	</div>

	<a 
		href="#" 
		class="icon header__user">

		<svg></svg>
	</a>
</header>

<header class="header header--black">
	
	<a 
		href="#" 
		class="icon header__back header__back--white">

		<svg></svg>
	</a>

	<div class="header__logo">
		<svg></svg>
	</div>

	<a 
		href="#" 
		class="icon header__user header__user--white">

		<svg></svg>
	</a>
</header>

Notes

Replace <svg></svg> with the correct icon (back, logo, user). The --black modifier set the background of the header to black, and the --white modifier on the items is used to change the font color.

SCSS

.header {
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: $box-shadow-2;
	padding: 0 25px;
	background: #fff;
	&--black {
		background: #000;
		color: #fff; 
	}
	&__logo {
		width: 100%;
		svg {
			max-height: 22px;
		}
	}
	&__back, &__user {
		color: $font-color;
		&:hover {
			color: $font-color;
		}
		&--white {
			color: #fff;
			&:hover {
				color: #fff;
			}
		}
	}
	&__user {
		font-size: em(26);
	}
}