Copernicus Component Library

Header

Implemented by Agency as part of the Copernicus Programme

<body class="ccl-style ccl-color_generic">	
					<header class="ccl-header">
							<div class="ccl-header-tools">
					<div class="ccl-container">
						<div class="ccl-main-menu-collapse-button"><span class="ccl-icon-menu"></span></div>
						<div class="ccl-search-collapse-button"><span class="ccl-icon-zoom"></span></div>
						<div class="ccl-header-slogan">Implemented by Agency as part of the Copernicus Programme</div>

<div class="ccl-header-tools-container">
							<ul class="ccl-header-menu-tools">
								<li><a href="#">Media</a></li>
								<li><a href="#">Use Cases</a></li>
								<li><a href="#">Contact</a></li>
								<li><a href="#">Login</a></li>
							</ul>
							<form class="ccl-header-search"><input type="text" placeholder="search"><button type="submit"><span class="ccl-icon-zoom"></span></button></form>
							<div class="ccl-header-lang-switcher" id="block-languageswitcher">
								
								<div class="ccl-language-list-container">
								<ul class="ccl-language-list">
									<li hreflang="en" class="en is-active"><a href="#" class="ccl-language-link is-active" hreflang="en">English (EN)</a></li>
									<li hreflang="fr" class="fr"><a href="#" class="ccl-language-link" hreflang="fr">Français (FR)</a></li>
									<li hreflang="de" class="de"><a href="#" class="ccl-language-link" hreflang="de">Deutsch (DE)</a></li>
								</ul>
							</div>
							</div>
						</div>
					</div>
				</div>
						<div class="ccl-header-nav ">
							<div class="ccl-container">
								<div class="ccl-header-logos-container">
									<div class="ccl-header-logo-container">
										<img class="ccl-header-logo" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/copernicus_eu_logo.svg"  />
									</div>
									
									<div class="ccl-header-logo-service-container ccl-service-button ccl-service-button-full ccl-service-button-climate">
										<img class="ccl-svg ccl-service-button-icon" src="https://eu-copernicus.github.io/copernicus-component-library/ccl-assets/images/ccl-icon-climate.svg"/>
										<div class="ccl-service-button-label" >Climate<br/>Change Service</div>
									</div>
									 
								</div>

<nav class="ccl-main-menu">
									<ul class="ccl-header-main-menu">
										<li><a href="#">Home</a></li>
										<li><a href="#">Services</a></li>
										<li><a href="#">Opportunities</a></li>
										<li><a href="#">Access to data</a></li>
										<li><a href="#">News & events</a>
											<ul>
												<li><a href="#">Item 1</a></li>
												<li><a href="#">Item 2</a></li>
												<li><a href="#">Long item 3</a></li>
												<li><a href="#">Very very very long item 4</a></li>
												<li><a href="#">Item 5</a></li>									
											</ul>
										</li>
										<li><a href="#">About</a></li>
									</ul>
								</nav>
							</div>
						</div>
					</header>
					<div class="ccl-banner-top-container">
						<div class="ccl-banner-top-main" style="background-image: url(https://eu-copernicus.github.io/copernicus-component-library/assets/images/banner_placeholder.jpg)">
							<div class="ccl-container">
								<div class="ccl-banner-top-main-block-title">
									<div class="ccl-banner-top-main-title">Copernicus</div>
									<div class="ccl-banner-top-main-text">Lorem ipsum dui a turpis finibus, lorem ipsum dui a turpis finibus.</div>
								</div>
							</div>
						</div>
						<div class="ccl-banner-top-bar">
							<div class="ccl-container">
								
								<div class="ccl-banner-top-bar-left">Lorem ipsum dui a turpis finibus, lorem ipsum dui a turpis finibus.</div>
								<div class="ccl-banner-top-bar-right"><span class="ccl-icon-map-dot"></span> Lorem ipsum dui</div>
							</div>
						</div>
					</div>
				</body>

How to use

1. Set up on Your Site

Copy this code into the <head> of each template or page where you want to use a ccl element.

2. Choose your Color palette

Add Classes on your element <body> (or on a html container). Find the right one according the theme to use on your page.

example: <body class="ccl-style ccl-color_generic">

3. Add Elements to Your UI

Start placing element in your HTML's <body>. Find the right HTML string , copy/paste on your page and customize it.